코딩하는 김딸기
fox 픽셀 퍼펙션 예제 본문
1. 기본구조 작성하고 레이아웃 분석하기
<!DOCTYPE html>
<html>
<head>
<title>Fox</title>
<link rel="stylesheet" href="foxstyle.css">
</head>
<body>
<div class="wrapper">
contents
</div>
</body>
</html>
->하나의 큰 덩어리로 구성되었으며 클래스를 wrapper로 지정한다
2. 마진 초기화
body{
margin: 0;
}
p{
margin: 0;
}
h1{
margin: 0;
}
3. 각 레이아웃의 스타일 설정
.wrapper{
box-shadow: 0 0 20px red;
width: 300px;
margin: 60px auto;
}
- .wrapper: 이 클래스 선택자는 wrapper 클래스를 가진 HTML 요소를 선택합니다.
- box-shadow: inset 0 0 20px red;:
- inset: 기본적으로 그림자는 요소 외부에 생기지만, inset을 사용하면 내부 그림자가 생성됩니다.
- 0 0: 이 두 개의 값은 그림자의 가로(horizontal) 및 세로(vertical) 오프셋을 의미합니다. 0으로 설정되어 있어 그림자가 요소의 중심을 기준으로 퍼집니다.
- 20px: 이 값은 그림자의 흐림 정도(블러)를 설정합니다. 값이 클수록 그림자가 더 흐리게 퍼집니다.
- red: 그림자의 색상을 빨간색으로 지정합니다.
- =>이 스타일은 요소의 외곽에 빨간색의 흐린 그림자 생성 (wrapper구역 시각화 용)
- width: 300px;:
- 요소의 너비를 300픽셀로 설정=>총 페이지의 가로 너비
- margin: 60px auto;:
- **60px auto**는 요소의 상하 마진을 60픽셀로 설정하고, 좌우 마진을 자동으로 설정합니다.
- auto는 좌우 마진을 자동으로 동일하게 설정하여 요소가 부모 컨테이너 내에서 수평으로 가운데 정렬되도록 합니다.
4. wrapper 내부의 컨텐츠 레이아웃 분석하기
<body>
<div class="wrapper" >
<img class="cover" src=" fox .png">
<div class="contents">contents</div>
</div>
-이미지와 내용의 2가지 덩어리로 구성되어 있다. 각 클래스를 cover,contents로 설정한다
5. 분할된 덩어리 안에 컨텐츠 삽입
<div class="contents">
<h1>FOX</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean
massa. Cum sociis natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec</p>
</div>
내용 덩어리 안의 제목, 내용문구를 삽입
<body>
<div class="wrapper" >
<article class="animal">
<img class="animal-cover" src="fox.png" >
<section class="animal-contents">
<h1>FOX</h1>
<p>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean
massa. Cum sociis natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec
</p>
</section>
</div>
</div>
</body>
-총 레이아웃을 보완해보았다
-> 이미지와 내용의 2가지 덩어리를 animal을 클래스로 하는 article로 감쌈
->이미지와 내용의 클래스 명 앞에 animal을 붙여 더 명확히 정함
->시맨틱 레이아웃을 위해 내용부분을 div가 아닌 section으로 변경
의미론적 차이:
<div>: 의미가 없는 단순한 컨테이너.
<section>: 의미론적 의미를 가지고 특정 주제나 내용 단위로 사용.
사용 목적:
<div>: 주로 스타일링 및 스크립팅 목적, 의미론적 그룹화를 필요로 하지 않을 때 사용.
<section>: 문서 내에서 명확한 구분이 필요한 독립적인 섹션을 정의할 때 사용.
구조적 차이:
<div>: 구조적이거나 의미론적인 역할이 없음.
<section>: 문서 내 논리적인 흐름과 구조를 제공.
둘 다 문서의 레이아웃을 구성하는 데 유용하지만, <section>은 보다 구체적이고 의미 있는 콘텐츠 블록을 나타내는 데 사용되며, 검색 엔진과 스크린 리더와 같은 접근성 도구에 더 나은 정보를 제공합니다.
6 컨텐츠의 스타일 설정
6-1) css초기화
body{
margin: 0;
background-image: url(back.png);
background-size: 1280px 723px;
}
- margin: 0;: 브라우저가 기본적으로 적용하는 본문의 모든 외부 여백을 제거합니다.
- background-image: url(back.png);: 본문 배경 이미지로 back.png를 사용합니다.
- background-size: 1280px 723px;: 배경 이미지의 크기를 너비 1280픽셀, 높이 723픽셀로 설정하여 이미지가 전체 화면을 덮도록 조정합니다.
p{
margin: 0;
}
margin: 0;: <p> 요소(단락)의 기본 외부 여백을 제거합니다. 이는 문단 사이의 간격을 없애고, 필요에 따라 사용자 정의 마진을 적용할 수 있도록 합니다.
h1{
margin: 0;
font-size: unset;
font-weight: inherit;
}
- margin: 0;: <h1> 요소(헤딩 1)의 기본 외부 여백을 제거합니다.
- font-size: unset;: <h1> 요소의 기본 폰트 크기를 제거하고, 상속된 값이나 기본값을 사용하도록 설정합니다. 이로 인해 부모 요소의 폰트 크기나 브라우저 기본값이 적용됩니다.
- font-weight: inherit;: <h1> 요소의 폰트 굵기를 부모 요소로부터 상속받도록 설정합니다. 이 속성은 기본적으로 볼드체로 설정되는 <h1>의 폰트 굵기를 사용자 정의할 수 있게 합니다.
이 설정들은 요소가 자신의 스타일을 명시적으로 지정하지 않고, 부모 요소의 스타일을 따라가도록 하거나 기본 스타일을 사용하도록 하는 데 유용합니다.
img{
vertical-align: top;/*아래쪽 공간 사라짐*/
width: 300px;
}
- vertical-align: top;: 인라인 요소나 인라인 블록 요소로 사용될 때, 이미지의 수직 정렬을 top으로 설정하여 이미지 아래에 생기는 기본적인 여백을 제거합니다. 이는 종종 텍스트와 이미지가 혼합된 레이아웃에서 불필요한 공간을 제거하는 데 사용됩니다.
- width: 300px;: 모든 이미지의 너비를 300픽셀로 고정합니다.
6-2) css디자인
전체 구조
- :root: CSS 변수와 전체 문서에 공통적으로 적용할 기본 스타일을 정의할 때 사용됩니다.
- .wrapper: 전체 레이아웃의 중앙 정렬과 폭을 설정합니다.
- .animal-cover: 요소를 가운데로 정렬합니다.
- .animal-contents: 컨텐츠 영역에 대한 배경과 스타일을 정의합니다.
- .animal-contents h1: animal-contents 내에 포함된 h1 요소의 스타일을 정의합니다.
/*css 디자인*/
:root{
font-family: 'arial';
}
font-family: 'arial';: 문서 전체에 적용될 기본 폰트를 Arial로 설정합니다.
.wrapper{
width: 300px;
margin: 60px auto;
}
- width: 300px;: 요소의 너비를 300픽셀로 설정합니다.
- margin: 60px auto;: 상하단 마진을 60픽셀로 설정하고, 좌우 마진을 자동(auto)으로 설정하여 요소가 부모 컨테이너 내에서 수평으로 중앙에 정렬되게 합니다.
.animal-cover{
margin: 0 auto;
display: block;
}
- margin: 0 auto;: 상하단 마진을 0으로 설정하고, 좌우 마진을 자동으로 설정하여 요소가 수평으로 중앙에 배치되도록 합니다.
- display: block;: 요소를 블록 레벨 요소로 설정하여 전체 가로폭을 차지하도록 합니다.
.animal-contents h1{
color: #FFFFFF;
font-size: 36px;
font-weight: 700;
margin-bottom: 10px;
}
- color: #FFFFFF;: h1 요소의 텍스트 색상을 흰색으로 설정합니다.
- font-size: 36px;: 폰트 크기를 36픽셀로 설정합니다.
- font-weight: 700;: 폰트 굵기를 700으로 설정하여 텍스트를 두껍게 만듭니다.
- margin-bottom: 10px;: 요소 하단에 10픽셀의 마진을 설정하여 다음 요소와의 간격을 만듭니다.
/*css reset*/
body{
margin: 0;
background-image: url(back.png);
background-size: 1280px 723px;
}
p{
margin: 0;
}
h1{
margin: 0;
font-size: unset;
font-weight: inherit;
}
img{
vertical-align: top;/*아래쪽 공간 사라짐*/
width: 300px;
}
/*css 디자인*/
:root{
font-family: 'arial';
}
.wrapper{
width: 300px;
margin: 60px auto;
}
.animal-cover{
margin: 0 auto;
display: block;
}
.animal-contents{
background-image: url(grass.png);
background-size: 300px 50px;
background-repeat: repeat-x;
/*유지보수성 좋음-컨텐츠 유동성에 대응함*/
background-color: #9C6035;
color: #E8BC9C;
padding: 60px 20px 48px;
border-radius: 0 0 30px 30px;
border-bottom: 10px solid #46260E;
height: auto;/*유지보수성 좋음*/
}
.animal-contents h1{
color: #FFFFFF;
font-size: 36px;
font-weight: 700;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Fox</title>
<link rel="stylesheet" href="foxstyle.css">
</head>
<body>
<div class="wrapper" >
<article class="animal">
<img class="animal-cover" src="fox.png" >
<section class="animal-contents">
<h1>FOX</h1>
<p>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean
massa. Cum sociis natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec
</p>
</section>
</div>
</div>
</body>
</html>