본문 바로가기

css7

KDT 5th 웹개발자 입문 수업 10일차 어제 복습하겠다고 혼자 뚱땅거리며 만들던 스타벅스 모작이 잘 안풀려서 거진 한가지 이유로 1시간 넘게 헤맸다. 알고보니 선택자 지정상 inner 클래스에 height 잡아 둔 것이 화근이었고 (BEM의) Block 요소에는 가급적 저런 요소를 두지 않도록 다시 신경써야겠다고 생각했다. ㅜㅜ 별 것도 아닌데 이유를 찾느라 하나하나 고쳐보았고 다신 이런 실수를 하지 않아야겠다고 다짐하게 되었다. 스타벅스 클론 코딩 마지막날! 어제는 메인 메뉴 컨텐츠와 뱃지, 컨텐츠, 공지와 리워드까지 진행했으며 나머지 상품 컨텐츠와 푸터를 마무리로 끝낸다고 한다. 1. 상품 컨텐츠 (1) 이 부분을 만들었고, 일단 html 구조상 section으로 크게 나눠주고 img item과 img text, btn을 두되, posit.. 2023. 2. 8.
KDT 5th 웹개발자 입문 수업 9일차 어제 남은 헤더의 메인 컨텐츠 부분을 만들었다. 도중에 li를 l1으로 써서 당황했는데, cmd+d를 눌러서 이름이 같은 여러 요소를 한번에 지정이 가능하다는 점을 알게되었다. 스타벅스 홈페이지 클론 코딩 - 2 1. 메인 메뉴 컨텐츠 배치 position fixed를 사용하여 뷰포트 기준으로 width를 가져올 필요가 있음. 부모 요소에서부터 위치를 가져오므로 left값을 0으로 줘야 한다. 일단 컨텐츠는 hover가 되었을 때 보여야 하므로 display none으로 해주고 메인 메뉴가 hover 됐을 때 display block 으로 해주면 보이게 된다. 메인 메뉴 컨텐츠 또한 inner 안에 있어야 하는데 width를 제외한 다른 속성은 필요 없으므로 header > .inner 같이 특정 지어준.. 2023. 2. 7.
KDT 5th 웹개발자 입문 수업 8일차 주말 간 헤더를 세 개의 사이트(인프런과 청년몽땅정보통, 투썸플레이스)에 만들어 보면서 그래도 좀 실력이 늘었을까 싶다. 완벽하게 모작하지는 못했지만(아직 자바스크립트 활용법을 모름..) 모양만 대애충 ... 오늘부턴 스타벅스 페이지를 클론 코딩 한다고 하신다! 스타벅스 홈페이지 클론 코딩 - 1 1. 문자 인코딩 설정 - UTF-8 : 초성, 중성, 종성으로 문자를 구분하여 작성 (ex. ㄱ, ㅏ, ㅇ, ㅇ, ㅏ, ㄴ,...) - EUC-KR : 하나의 완성된 글자를 인식 (ex. 강, 안, ...) 2. 뷰포트 렌더링 방식 설정 - width=device-width : 화면의 가로 너비를 각 디바이스의 가로 너비와 동일하게 적용 - initial-scale=1.0 : 화면의 초기 화면 배율(확대 정도.. 2023. 2. 6.
KDT 5th 웹개발자 입문 수업 4일차 ✚ 복습 추가 가상 요소 선택자인 ::before/::after 등은 주로 HTML에 가상의 content를 넣어줘서 디자인 요소를 넣어줘서 사용하므로 content="" 속성이 따로 없다면 다른 스타일들을 적용하더라도 적용되지 않는다. 그러므로 가상 요소 선택자는 꼭 content를 넣어주고 사용하자. CSS 속성 1. 박스 모델 웹페이지에 나타낼 수 있는 것은 글자와 상자로 나눌 수 있다. 즉, 요소가 화면에 출력되는 특성은 크게 인라인 요소/블록 요소로 나뉜다. ✔️ 인라인 요소 : 글자를 만들기 위한 요소들 ✔️ 블록 요소 : 상자(레이아웃)을 만들기 위한 요소들 * width/height의 기본값은 요소에 이미 들어있는 속성의 값임 span 요소 div 요소 span 요소 span 요소 div .. 2023. 1. 31.

티스토리툴바