Nomad Coder의 강의를 들으며 배웠던 내용을 바탕으로 현재 서비스 되고 있는 카카오톡 페이지를 클론코딩 해보려고 한다. 코딩하면서 막히거나 어려운 부분에 대해서 작성할 예정. 1. 상단 헤더 부분 만들기 (난이도 쉬움) 이처럼 카카오톡은 상단 부분에 항상 위로 노출 돼 있는 헤더 부분이 존재한다. 이 부분을 웹에서 구현하기 위해서 z-index와 position:fixed; 속성을 사용했다. 그리고 밑의 contents 부분을 position:absolute로 만든 뒤, 헤더 부분만큼 top 값을 주었다. 2. 프로필 카드 만들기 (난이도 조금 있음) 위 사진처럼 프로필 오른쪽 부분에는 프로필 뮤직이 존재하면, 오른쪽에 프로필 뮤직만 뜨고 상태 메세지와 프로필 뮤직이 같이 있다면, 위의 모양대로 ..

대규모의 페이지 및 다수의 인원이 작업을 해야할 경우 클래스 명을 일관성 있게 유지해야할 필요가 있다. 그렇기 때문에 생겨난 것이 CSS 방법론이다. CSS 방법론은 다음의 형태를 추구한다. 코드의 재사용성 증대 쉬운 유지보수 확장성 보장 의미 있는 클래스명 사용( 클래스 명으로 용도 파악 ) SMACSS (Scalable and Modular Architecture for CSS) 클래스명을 최대한 의미있게 사용하여 여러 사람이 프로젝트를 진행할 때 쉬운 이해를 제공한다. SMACSS는 5개의 규칙을 따른다. 1. Base(기본 규칙) 각 브라우저의 스타일 초기화를 위해 reset, normalize 등 페이지 전체에 기본 스타일을 적용한다. css !important는 사용하지 않는다. 2. Layo..