[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (1)

웹 퍼블리싱/[codeit] 웹 퍼블리싱 (완)

[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (1)

web_seul 2021. 5. 24. 21:37

Box Model

1강. Box Model 소개

border, margin, padding

2강. margin, padding

3강. margin & padding 정리

padding : 위 우 아래 좌

margin : 위 우 아래 좌

margin-left : auto;

margin-right : auto;

margin : 0 auto;

padding과 margin의 차이

내용(content), 패딩(padding), 테두리(border)로 이루어진 요소에서

내용과 테두리사이의 여유공간이 padding

요소 주위의 여백은 margin

4강. width, height

5강. width, height 정리

width, min-width, max-width

height, min-height, max-height

img는 inline으로 width, height지정 권장

6강. overflow

7강. overflow 정리

//기본값
overflow: visible;
overflow: auto;
overflow: scroll;
overflow: hidden;

//word-break : 줄바꿈 시 단어기준 or 글자기준을 정하는 속성
word-break : normal; //CJK(한중일) 문자는 글자 기준으로, 이외의 문자는 단어기준으로 줄바꿈
word-break : break-all; //글자기준 줄바꿈, 반응형시 권장
word-break : keep-all; //단어기준 줄바꿈
word-break : initial; //기본값 설정
word-break : inherit; //부모요소의 속성값 상속

8강. border

9강. border 정리

border: 2px solid #000;
border: 2px dotted #000;
border: 2px dashed #000;

border-style: solid;
border-color #000;
border-width: 5px;

border-top:3px dotted red;
border-bottom:2px dashed red;

border: none;
border: 0;

10강. 그랜드 부다페스트 호텔

11강. 박스를 꾸미는 몇가지 방법

12강. 둥근모서리

13강. 배경색

14강. 그림자

border-radius: 50px;
border-top-left-radius: 50px; //상좌측 테두리만 설정가능


background-color:red; //#ff0000; rgb(255,0,0);
background: transparent; //기본값, 투명하게

//background가 요소내에서 확장되어야하는 거리 설정
background-clip: content-box; //padding제외, content부분만
background-clip: padding-box; //padding포함
background-clip: border-box; //border포함


box-shadow: none; //기본값
box-shadow: 10px 10px; //가로, 세로의 그림자 위치 -가능
box-shadow: 10px 10px red; //색 설정
box-shadow: 10px 10px 5px red; //5px 그림자 흐림정도
box-shadow: 10px 10px 5px 15px red; //15px 그림자크기

15강. box-sizing

16강. box-sizing 정리

box-sizing: content-box; //기본값
box-sizing: border-box;전체 넓이(또는 높이값이)가 padding과 border를 포함하도록

//모든 요소에 적용
*{
  box-sizing: border-box;
}

body와*의 차이

body 태그에 속성값을 정의해주면 body 태그자체와 상속이 허용되는 값들은 body 태그 내의 태그나 클래스, 아이디로 상속되지만 * 는 상속과는 관계 없이 모든 요소에 적용

속성의 기본값 initial

css reset 찾아보기

17강. 로그인페이지

block 태그 정렬

margin-left: auto; margin-right: auto;

margin-top' 또는 'margin-bottom'이 'auto'인 경우, 그들이 실제로 갖는 값은 0

18강. 배경이미지

19강. 배경이미지 정리노트

background-image: url("이미지경로");
background-repeat: no-repeat;
background-size: cover;
background-position: right bottom; //우하단 중심

background-repeat: no-repeat; //반복x
background-repeat: repeat-x; //가로반복
background-repeat: repeat-y; //세로반복
background-repeat: repeat; //가로세로반복
background-repeat: space; //반복가능한만큼 반복 후, 남는 공간은 이미지간의 여백으로 배분
background-repeat: round; //반복가능한만큼 반복 후, 남는 공간은 이미지의 확대를 통해 배분


background-size: auto; //원래 이미지 사이즈대로 출력
background-size: cover; //화면을 꽉 채우면서, 사진 비율을 유지
background-size: contain; //가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력
background-size: 30px 50px; //픽셀값 지정
background-size: 60% 70%; //퍼센트값 지정(부모요소의 width, height기준)

//단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom)
background-position: left top;
background-position: center center;
background-position: right bottom;

background-position: 25% 75%; //퍼센트로 지정해주기(전체 width, height기준)
background-position: 100px 200px; //픽셀로 지정하기(좌상단기준 이동px)

20강. 썸머 뮤직페스티벌(SMF)

a태그가 가진 기본값을 color가 있어서 부모값을 가져오려면 a{color:inherit;}

21강. 코딩의 민족

//내풀이
<!DOCTYPE html>
<html>
<head>
  <title>코딩의 민족</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="delivery">
    <div class="title">
      <h1>코딩의 민족</h1>
      <h2>넌 코딩할 때가 제일 이뻐</h2>
    </div>
    
    <div class="box">
      
      <div class="box01 box-cont">
        <div class="box001">
          <div class="photo"></div>
          <div class="store">
            <div class="name">코딩에 빠진 닭</div>
            <div class="info">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</div>
            <a href="#">바로 결제</a>
          </div>
          
        </div>
      </div>
      
      <div class="box02 box-cont">
        <div class="box002">
          <div class="photo"></div>
          <div class="store">
            <div class="name">코코 스시</div>
            <div class="info">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</div>
            <a href="#">바로 결제</a>
          </div>
        </div>
      </div>
      
      <div class="box03 box-cont">
        <div class="box003">
          <div class="photo"></div>
          <div class="store">
            <div class="name">코데리아</div>
            <div class="info">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</div>
            <a href="#">바로 결제</a>
          </div>
        </div>
      </div>
      
      <div class="box04 box-cont">
        <div class="box004">
          <div class="photo"></div>
          <div class="store">
            <div class="name">코가네</div>
            <div class="info">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</div>
            <a href="#">바로 결제</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

* {
  box-sizing: border-box;
  font-family: BMJUA;
}
body{
  width:100%;
  height:100%;
  background-color: #f0e8d9;
}
.delivery{
  
}
.title{margin:75px auto;}
.title h1{font-size: 64px;}
.title h2{margin-top:30px; font-size:32px;}

.box-cont{
  width:300px; height:350px; 
  margin-bottom:50px;
  border-radius:10px;
  overflow: hidden;
}
.box-cont .photo{
  height:200px; 
  background-size:cover;
  background-position: center;
}
.box-cont .store{
  background-color:#fff;
  padding:20px;
}
.box-cont .name{
  font-size:20px;
}
.box-cont .info{
  margin-top:20px;
  margin-bottom:16px;
}
.box-cont a{
  text-decoration: none;
  display:block;
}
.box01 .photo{background-image:url(../images/chicken.jpg);}
.box02 .photo{background-image:url(../images/sushi.jpg);}
.box03 .photo{background-image:url(../images/burger.jpg);}
.box04 .photo{background-image:url(../images/bibimbap.jpg);}

! 폰트설정

! 중앙정렬

//정답
<h1>코딩의 민족</h1>
<h2>넌 코딩할 때가 제일 이뻐</h2>

<div class="food">
  <img src="images/chicken.jpg" width="300" height="200">
  <div class="info">
    <h3>코딩에 빠진 닭</h3>
    <p>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
    <a href="#">바로 결제</a>
  </div>
</div>

@font-face{
            src: url("../fonts/BMJUA_otf.otf");
            font-family: JUA;
        }
        *{box-sizing: border-box;}
        body{background-color:#f0e8d9}

        h1{
            text-align: center;
            font-size: 64px; 
            color: #58595b;
            margin-top: 75px;
            margin-bottom: 30px;
            font-family: JUA;
            }
        h2{
            text-align: center;
            font-size: 32px; 
            color: #58595b;
            margin-bottom: 75px;
            font-family: JUA;
            }
        
        .food{
            background: #fff;
            width: 300px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 10px;
            overflow: hidden;
        }
        .food .info{
            padding: 20px;
            text-align: center;
        }
        .food h3{
            color:#58595b;
            font-size: 32px;
            font-family: JUA;
            margin-top: 0;
            margin-bottom: 20px;
        }
        .food p{
            color:#58595b;
            font-size: 16px;
            font-family: JUA;
            margin-top: 0;
            margin-bottom: 16px;
            text-align: left;
        }
        .food a{
            text-decoration: none;
            color:#0000ee;
            font-size: 32px;
            font-family: JUA;
        }

저작자표시

'웹 퍼블리싱 > [codeit] 웹 퍼블리싱 (완)' 카테고리의 다른 글

[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (4) (0)	2021.06.01
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (3) (0)	2021.05.30
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (2) (0)	2021.05.29
[ codeit ] 웹 퍼블리싱 - HTML/CSS 시작하기 (0)	2021.05.23

현재글[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (1)

My record for programming.

Today :
Yesterday :

기록저장소