오늘도 디벅잉

HTML, CSS를 활용한 코코아톡 클론코딩 HTML, CSS 기초 학습 완료

1. HTML element 배경에 이미지 넣기 css에서 background-image 관련 property를 활용하면 배경을 이미지로 대체할 수 있습니다. background-size: cover; => 이미지의 비율을 유지한 채로 제일 크게 설정합니다. 이미지의 크기가 요소를 초과하면 이미지를 잘라내어 빈 공간이 생기지 않도록 합니다. background-position: center; => 이미지를 가운데 정렬합니다. 2. position: absolute에서 화면 중앙에 배치하기 부모 요소의 좌측 또는 상단에서 50% 만큼 띄운 후에 해당 요소의 좌표값을 50% 만큼 되돌립니다. 3. pseudo selector BEM으로 클래스가 난무하는 것이 싫을 때는 pseudo selector를 잘 활용..

코드 작성시 기본 방침 1. 마우스 사용 최소화 2. Emmet 사용 필수! 습관화하기! 3. Prettier 설치 (설치 방법 향후 작성 예정) 4. 귀찮은거 싫은 사람은 WebStorm 사용 추천 WebStorm 단축키 (VS Code 역시 동일할 수 있음) Ctrl + (방향키 or 백스페이스) : 동일한 특성을 가지는 단어 그룹만큼 이동 or 삭제 Ctrl + Alt + J : 현재 커서가 있는 행을 특정 태그로 감싸기 Alt + F2 : Built-in Preview 또는 브라우저(크롬, 파이어폭스, 엣지 등 설정 가능) 실행 Alt + Shift + 위아래 방향키 : 현재 커서가 있는 행을 위아래로 이동 Shift + F6 : 동일한 성격의 같은 이름들을 동시에 변경 WebStorm 사용 이점..

HTML - CSS - JavaScript 관계 HTML - CSS - JavaScript 셋의 관계에 대한 설명을 듣다보니 건축 3대 요소 구조 - 미 - 기능의 관계가 떠올랐다. 웹페이지의 콘텐츠를 구성하는 HTML은 건축의 뼈대가 되는 구조(Structure)와 닮았고, 콘텐츠의 색상, 크기 등 외형을 꾸미는 CSS는 건축에서의 보여지는 아름다움(Beauty)과 의미가 통하며, 동적인 기능을 가능케 하는 JavaScript는 건축의 기능(Function)과 의미가 통한다고 느꼈다. HTML = Structure CSS = Beauty JS = Function 요소(Element)의 닫는 태그(Closing Tag)가 /element 인 이유 HTML에서 닫히는 요소(element)들은 /blabla..