개발자 도담씨

프론트작업을 하면서 단순히 디자인을 그대로 옮기는것이 아닌 사용자들의 편의를 생각하는 부분들이 아직 부족한거 같다:_( 처음 웹을 만들때 내가 빠트렸던 사소한 부분들을 정리해 놓을려고한다. +) 나는 의외로 꼼꼼하지 못한거같다..ㅎㅎ 노력해서 점차 나아지는것 같지만... 1. 슬라이드(캐러셀)을 할 때 다음에 컨텐츠가 있다는 것을 나타내기 2. 아이콘이나 이미지등의 깨짐 문제 ( 모바일도 확인해 볼 것 ) 3. 크로스 브라우징 4. 회원가입시 특정 입력값에 조건이 있다면 명시 5. 한페이지에 중복되는 정보가 있는건 자제 ( 촌스러운 요소이다 ) 새로 알아가는 CSS부분들 1. 세로 정렬하는 새로운 방법을 알았다. 부모에 relative가 되어있고, 정렬하고자 하는 태그에 absolute, top:50%,..

이 블로그는 내가 공부한것들을 까먹지 않도록 포스팅하는 용도라 간단한 부분들은 슝하고 지나가겠다😅 1. SASS의 변수는 $로 정의한다. 2. 중첩 ( 아래 코드로 설명 끝ㅎㅎ.. ) 아래의 코드처럼 작성후 컴파일 하면 nav{} nav ul{} 처럼 css파일이 작성된다. header { background-color: $header-back; display:block; height:100px; nav { ul { list-style:none; float:right; li{ display: inline-block; a { display: block; padding: 5px 3px; margin:10px 20px; } } } } } 3. 부분화 및 불러오기 설명을 보니 내가 느낀바로는 전역변수를 별도의 ..

설치하기를 쓰고 공부를 시작할려고 하자마자 바로 불편함을 느꼈다ㅋㅋㅋ...내가 설치한건 컴파일러.. css는 저장만 하면 바로 적용된걸 볼 수 있는데.. scss로 할려니 scss파일을 만들고 > 컴파일하고 > css 바꿔주고 이짓을 해야한다고..? 바로 다시 검색하러 갔다ㅋ큐ㅠㅠ 나는 원래 메모장같은 nodepad나 sublime text같은 친구들을 주로 사용했는데, scss를 사용하기 위해 알아보다 visualstudio code라는 친구를 접했다. (비쥬얼스튜디오 오랜만이야... 응용할때만 봤었는데) 1. 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code ..

원래 웹 하나를 혼자 만들겠다는 목표를 가지고 풀스택을 공부하다가. 요즘 프론트앤드에 조금 더 흥미가 가기 시작했다. 물론 저 목표는 유효하나 프론트 앤드쪽을 깊게 파보고 싶은 마음에 알아보다가 SASS는 필수라기에 공부를 시작해본다 :) 인터넷에 충분히 잘 설명되어있지만 이상하게도 나는... 인터넷 강의든 글이든..(물론 개발할땐 참고하지만) 공부가 불가능하니 또 책을 주문했다😂 우선 SASS는 컴파일러 없이 사용할 수 없기때문에 컴파일 과정을 거쳐야한다. SASS의 설치는 간단하다. SASS를 PC에 설치 하는 방법은 '어플리케이션 방식'과 커맨드라인'방식이 있다. 커맨드 라인방식은 직접해보진 않았지만 메모는 해놓겠다. @커맨드 라인 방식 1. 맥과 리눅스를 루비라는 프로그래밍 언어가 설치가 되어 있..

1편 - [Web Programming/Frontand Challenge] - 웹 페이지의 랜더링 과정 1편참고 블로그 : http://12bme.tistory.com/140 1편에서 웹 페이지의 랜더링 순서를 1단계부터 5단계 까지 알아보았다. 이번 2편에서는 리플로와 리페인트에 대해 알아보겠다...레더링이 모두 완료된 상태에서 ( 페인트까지 끝낸 상태 ) 스타일이 바뀌거나새로 나타나는 노드가 있다면...? 또는 데이터 변경으로인해 ( ex. AJAX ) 다시 표시해 주어야하는 일이 생긴다면?아마 다시 스타일을 적용하고 ( 랜더 트리 작업 ) 페인트 해주어야 할 것이다.이럴 경우에 발생하는 것이 리플로와 리페인트이다. 리플로 ( Reflow )란?변경이 생긴 랜더 트리에 대해 유효성 확인을 하고 노드의..