기억하기 위한 기록

[잘난웹디] 웹퍼블리싱 기초강좌 / 레이아웃1강 본문

Front-end/html

[잘난웹디] 웹퍼블리싱 기초강좌 / 레이아웃1강

곽구 2021. 1. 12. 19:32

 

* 잘난웹디님과는 다르게 이클립스로 실습했음

이클립스로 실습시 순서

1. window > preference > encoding > UTF-8로 변경후 작업환경 세팅

2. dynamic web project > 프로젝트 생성 > webcontent > index.html 생성 후 코드 작성

3. 서버 생성 후 포트넘버 변경

 

 

 예제 완성본 

전체를 div.wrap 으로 감싼

wrap > div.contents 예제를 담아본다.

contents  안에는 

제목 : <h2> 지금 꼭@ 읽어야할 이야기

내용 : <ul> 안에 <li> 안에 총 3개로 나눠준다.

li 안에 또 하나의 div로 텍스트들을 담아준다.

div.imgBox > background 이미지로 사진을  넣을 예정

 

 

 

- link를 걸어 style.css를 불러온다.

<head>영역 안에 <link rel="stylesheet" href="css/style.css" />

 

 

 

 

- 구글폰트 적용 : css 파일 상단에 구글폰트 import를 적어준다

  @import url(.....) ; 

 

 

- 웹 페이지가 기본적으로 가지고 있는 padding값과  margin 값을 reset 해준다.

* {
 padding : 0 ; margin : 0 ;

}

 

 

- li 가 가지고 있는 list-style 떄문에 ● 이 보여지기  때문에 list-style을  none으로 지정해준다.

li {

 list-style : none ;

}

 

 

- 제목<h2>에 패딩 값과 여러 속성값을 적어준다.

.contents h2 {

 font-size :  38px ; padding ; 30px 40px ;  

}

ㄴ> 상하 30px , 좌우 40 px을 여백으로 준다.

     margin-top 대신에 padding을 주는 이유는 ? margin은 상쇄가 있기 때문에 블럭요소끼리 겹칠 경우

한쪽 마진을 잃어버리는경우가 있기 때문에 margin 대신 padding을 준다.

 

 

 

 

- 세로로 쭈욱 떨어진 li를 가로로 정렬하기 위해 float : left 값을  적용해준다.

▲ .contents ul li { float:left; width:32%; margin-right:2%; background:green;}

 

 

 

- float  ; left를 적용하고 나니 ul의 background : yellow 가 사라졌다. 

그 이유는 ? 자식요소에 float를 줄 경우 부모요소가 높이값을 상실하기 때문에 사라지는 것이다.

그렇기 때문에 상실된 부모의 높이값을 채워주기 위해서 ul(부모)에 overflow : hidden ; 을 주면

높이가 다시 채워지게 되고 배경이 들어오게 된다.

 

 

 

 

 

 

 

 

 

 

ㄴ> 왼쪽 여백보다 오른쪽 여백이 더 넓은 이유는 li에 margin-right가 붙었기 때문에, 없애주면 동일해진다.

.coontents ul li:nth-child(3)  { margin-right : 0; }

▲ stylesheet에 작성

 

ㄴ> li의 3번째에 margin-right를 0으로 두면 오른 쪽 여백은 사라지지만, 여전히 오른쪽이 더 넓어 보인다.

이제 ul에 맞게 li의 width값을 넓혀주면 된다. width값 조정하고 , 확인하고 반목하며 작업

 

.contents ul li { float:left; width:31%; margin-right:2%; background:green;}

.contents ul li { float:left; width:32%; margin-right:2%; background:green;}

▲ width값이 31% >  width:32% 변경

 

 

- 아주 약~간의 차이는 있지만 bg 컬러를 빼고 , 시작적으로 확인하면 거의 티가 나지 않기 때문에 32%로 진행한다.

 

 

- li > imgBox에 이미지들을 넣어보자.

▲ .contents ul li . imgBox {background : url("../img/01.jpg") no-repeat center/cover;}

반복되지 말라고 속성값 no-repeat 적어주고,

위치를 잡아줘야하는데 center/cover로 준다.

ㄴ> 이미지 크기가  글씨  영역 외에는  보이지 않기 때문에 결론적으로, background 로 이미지를 넣을경우 높이를 적어주어야 한다.

- 그렇기 때문에 width 값과 height값을 추가해주어야한다.01.jpg")

 

 

ㄴ> width : 100% heigh:300px; 적용 후 

▲ .contents ul li . imgBox {width:100%; height:300px; background : url("../img/01.jpg") no-repeat center/cover;}

 

- 높이를 주어서 이미지가 제대로 나오는 것을 확인 할 수 있다. 

cover로 두었더니 이미지가 가로 세로 비율이 깨지지 않으면서 이미지 박스를 꽉 채우는 것을 볼 수 있다.

 

 

 

▲ .contents ul li . imgBox {width:100%; height:300px; background : url("../img/01.jpg") no-repeat center

left 0px top 0px/cover; }

left 에서 얼마 right에서 얼마  줄수 있기 때문에  각자 한번 변경해본다.

 

 

- 그리고 텍스트가 사진 영역에 꽉 차있기 때문에 padding을 상하좌무 30을 준다. 

▲ .contents ul li . imgBox {width:100%; height:300px; background : url("../img/01.jpg") no-repeat center/coverleft 0px top 0px/cover; padding:30px; }

이렇게 했더니 이미지가 패딩값까지다  채워져서 밖으로 넘치는것을 볼 수 있다.

 

 

▲ box-sizing;border-box;를 추가해야 padding이 width의 영역과 height의 영역에 포함되게 된다.

ㄴ> ▲ .contents ul li . imgBox {width:100%; height:300px; background : url("../img/01.jpg") no-repeat center/coverleft 0px top 0px/cover; padding:30px; box-sizing:border-box; }

 

 

 

- 글자가 검정으로 잘 보이지 않기 때문에 color :  #fff 또한 적어준다.

▲ .contents ul li . imgBox {width:100%; height:300px; background : url("../img/01.jpg") no-repeat center/coverleft 0px top 0px/cover; padding:30px; box-sizing:border-box; color:#fff; }

 

 

 

- 각각의 li 배경 사진을 변경해준다.

▲ 2번째 사진 변경

.contents ul li:nth-child(2) .imgBox{ width:100%; height:300px; background : url("../img/02.jpg") no-repeat center/coverleft 0px top 0px/cover; }

 

▲ 3번째 사진 변경

.contents ul li:nth-child(3) .imgBox{ width:100%; height:300px; background : url("../img/02.jpg") no-repeat center/coverleft 0px top 0px/cover; }

 

 

 

- imgBox 안에 있는 <p>에 스타일을 적용해준다.

★[tip] imgBox안에있는 많은 p중에 제일 인접한 p에게만 적용하고 싶다면 , .contents ul li .imgBox > p 로  꺽쇠를 사용하면 전체 p테그에 스타일이 적용되는게 아니고 > 꺽쇠로 가리키는 p태그만 스타일적용이 가능하다.

▲ 제일 인접한 p태그에만 스타일  적용

.contents ul li .imgBox > p {font-size: 14px; margin-bottom: 15px;}

 

▲  p태그 중에 slogan이라는 class에 스타일 적용

.contents ul li .imgBox .slogan  {font-size:24px; }

 

두개의 스타일이 적용되어 imgBox 안에 맨위의 p태그와, 슬로건 p태그의 스타일이 다르게 적용된걸 확인 할 수 있다.

 

 

 

- span 태그에 스타일 적용하기

▲  span 태그에 폰트 속성을 변경해주고 margin-bottom으로 아래 여백을 주었다.

.contents ul li span {font-size: 14px; font-weight:bold; color:#00d8ff; margin-bottom:20px; }

★중요★

margin-bottom을 주어도 여백이 먹히지 않는 이유는 span은 inline 요소이기 때문에

margin, width, height 등의 속성값이 적용되지 않는다.

span에 margin을 적용하고 싶다면 꼭! display : block; 로 요소의 값을 변경해 주어야 한다.

 

ㄴ>  span태그는 inline 요소이기 때문에 margin이 먹히지 않아서 display:block; 으로 변경시켜준 뒤 margin-bottom으로 아래 여백을 주었더니 적용이 되었다.

▲ .contents ul li span {font-size: 14px; font-weight:bold; color:#00d8ff; margin-bottom:20px; display:block; }

 

 

 

또한, 모든 span 태그에 스타일을 적용하는것이 아닌, li에 인접한  span에만 적용하기 위해 li > span 로 수정한다.

▲ .contents ul li > span {font-size: 14px; font-weight:bold; color:#00d8ff; margin-bottom:20px; display:block; }

 

 

 

 

- 전체 컬러 변경하고, contents margin 조정, span태그 크기변경, tit margin-bottom:40px; 변경 하면 실습완료

 

 

'Front-end > html' 카테고리의 다른 글

[잘난웹디] 한국소비자원 웹사이트 제작 3강 section_main 부분  (0) 2021.01.19
[잘난웹디] 한국소비자원 웹사이트 2강_메인페이지의 헤더영역  (0) 2021.01.19
<a>태그와 #  (0) 2020.11.30
Meta 태그란 무엇인가?  (0) 2020.11.23
<HTML> 기초 (드림코드 엘리 내용 정리) 1-4  (0) 2020.11.03
'Front-end/html' Related Articles more