nthchild3 css 선택자 오늘은 css에서 스타일을 지정할 때 특정 태그, 클래스, id에 적용될 수 있도록 지정하는 역할을 하는 '선택자'에 대해서 알아보는 시간을 갖도록 하겠습니다. - css 선택자란? 우리가 그 동안 css 코딩을 해 올때 css 코드를 적용시킬 태그, 클래스값, id값을 지정했었습니다. .container { display: inline-block; border: 1px solid black; background-color: yellow; } 이건 바로 전 포스팅의 코드 내용 중 하나를 가져온 것입니다. 여기서 보면 .container의 자리 보이죠? 이 코드에서는 container라는 클래스값을 선택자로 지정한 것입니다. 이렇듯 태그, 클래스, id 등 종류가 여러 개가 있는데, 하나씩 살펴 보도록.. 2021. 12. 18. 페이지 컨텐츠 베너 영역 제작(1) 지난번에는 매거진 영역까지 해서 끝냈었습니다. 원본 페이지를 한 번 보면, 매거진 영역 밑에 이렇게 되어 있는데 오늘은 위의 이 부분을 해 보겠습니다. (전의 글에서 설명했던 속성들은 짧게 설명만 하고 넘어가겠습니다.) 먼저 전체적인 설명을 드리면 전체 배경색은 흰색으로 되어 있고, 그 영역 가운데에 컨텐츠들이 모여 있습니다.(가운데 정렬) 오늘 우리가 할 부분에서 왼쪽의 테마 갤러리~대리점 찾기 부분은 ul li 리스트로 묶고, 오른쪽의 제품 찾기 영역은 따로 처리하겠습니다. 먼저 html 태그부터 쓰겠습니다. 테마 갤러리 블로그 대리점 찾기 제품 찾기 제품 전체검색 검색하기 전체 영역은 section(class notice)로 감싸 주었고, 아래의 공지, 뉴스까지 포함한 컨텐츠 전체 영역을 표.. 2021. 12. 14. 페이지 매거진 영역 제작(2) 전 글에 이어서 매거진 영역을 마저 끝내도록 하겠습니다. 지난번에는 딱 여기까지 했었습니다. 먼저 SB Flooring 부분부터 디자인을 해 보겠습니다. SB Flooring[오리지널,헤링본,강,엠보] SB마루는 한국 주거문화에 최적화되어 습기에 강하고, 열효율이 우수한 친환경 차세대 온돌마루입니다. 자세히보기 .magazine .slide_box .left div h3 {color:white;font-size: 20px;} .magazine .slide_box .left div h3 span {font-weight: normal; display: block;} html 코드의 h3 부분부터 css를 했습니다. 원본 페이지의 글씨 색깔, 크기를 맞춰 주고 밑의 [~] 괄호 부분은 줄넘김과 h3의 굵기 효.. 2021. 12. 13. 이전 1 다음
