DevSSOM

쇼핑몰 하단 영역 만들기 로 표시되는 하단 영역의 왼쪽에는 저작권 정보, 오른쪽에는 주소지 정보가 있음. 두 영역은 가운데를 기준으로 정확히 반으로 나눠짐. 기본코드 엘리스 사전 캐릭터 소개 줄거리 부록 하얀토끼 체셔 고양이 하트여왕 모자장수 엘리스에 오신 여러분 환영합니다! :) 도도새 애벌레 카드병정 황금열쇠 Copyright © 2016-2018 elice. All rights reserved. 대전광역시 유성구 문지로 193 KAIST 문지캠퍼스 진리관 T326호 >>> 하나하나 따라해보기 1. 하단 영역 전체 #footer에 대한 css 속성을 작성. HTML 코드는 위의 긴 코드로 확인하는 대신 태그만 보면, 아래와 같음. Copyright © 2016-2020 elice. All rights..

쇼핑몰 본문 영역 만들기 태그의 본문 영역에는 ‘엘리스에 오신 여러분 환영합니다! :)’ 를 기준으로 위아래에 각각 4개씩, 총 8개의 이미지가 있음. 이미지 영역에는 이미지와 타이틀 정보가 들어있음. 각 이미지 영역은 모두 크기가 동일하며, 각각의 배경색은 서로 다름. 기본 코드 엘리스 사전 캐릭터 소개 줄거리 부록 하얀토끼 체셔 고양이 하트여왕 모자장수 엘리스에 오신 여러분 환영합니다! :) 도도새 애벌레 카드병정 황금열쇠 태그는 익스플로러에서는 지원하지 않기 때문에, role이라는 속성을 사용해서 main이라고 명시를 해줘야함. 각각의 이미지가 들어가는 영역은 태그를 사용했고, 또 그 각각은 거기서 태그로 클릭이 되게 되어있어. 그리고 그 안에 이미지와 타이틀 정보가 들어있음. 그리고 중간의 에는 ..

웹페이지 구조 상단 영역은 엘리스 사전 캐릭터 소개 줄거리 부록 >>> 하나하나 따라해보기 1. index.css 파일에 다음 속성값을 작성. 모든 영역에서 margin, padding을 0으로 설정하고, .container에서 기본 바 넓이를 960px로 설정. * { margin: 0; padding: 0; } .container { width: 960px; } 2. , 의 불렛 설정과 의 텍스트 설정을 적용. ol, ul { list-style: none; } a { text-decoration: none; color: #000; } 3. 상단 영역 전체 #intro의 넓이와 높이를 설정. width: 100%, height: 80px #intro { width: 100%; height: 80px;..

display 이전에, HTML 태그는 크게 두 가지의 성격을 가지고 있다고 했음. Block과 Inline. 근데, 간혹가다 태그를 가지고 공간에 대한 크기를 입력해주고 싶다. 태그가 공간에 대한 크기를 갖고 있지 않으면 좋겠다. 하고 원래 태그가 갖고 있는 성격을 바꾸고 싶은 거야. 그럴 땐 display라고 하는 CSS 속성을 사용하게 되면, 태그를 inline으로 바꿀 때 속성값으로 inline을 주면 됨. display : Block과 Inline 요소가 가지고 있는 원래의 성격을 바꾸고 싶을 때 사용. 속성값으로 inline-block을 적용하면 두 요소의 성격을 모두 가짐. x축 정렬이면서 공간에 대한 크기를 만들고 상하 배치 작업까지 하고 싶다고 할 땐 inline-block. inline..

박스 모델 구조 박스 모델은 웹사이트 레이아웃을 구성할 때, 공간의 크기가 어떤 구조로 구성되어 있는지, 그 구성물들 자체를 통틀어 박스 모델이라고 얘기함. 박스 모델은 margin, border, padding, content 4가지 요소로 구성되어 있음. 박스 모델을 잘 이해해야 다른 웹사이트의 레이아웃 구조를 파악하기 쉽기 때문에 이 4가지는 반드시 기억하기. margin과 padding의 차이 margin과 padding은 border를 기준으로 생각하면 됨. 박스에 border가 있다고 가정했을 때(border를 사용하지 않았다면 border=0으로 생각), border의 바깥 쪽은 margin, 안쪽은 padding. margin-left, right, top, bottom : border 바..