CSS,박스 모델

궁금했던것: div 태그(한 라인 전체 차지)는 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용, 논리적 구분을 정의, CSS를 활용하여 스타일 적용,display 속성이 block임, 줄바꿈이 됨

inline은 한줄에 여러 개(image)

span 태그는 display 속성이 inline, 줄바꿈이 안됨.

블록 레벨 요소: 요서를 삽입했을 때 혼자 한 줄을 차지하는 요소, 요소 너비가 100%(h1, div, p)

인라인 레벨 요소: 줄을 차지하지 않는 요소, 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음(image, strong, span)

 

박스모델: 박스 형태의 요소

• 콘텐츠 영역
• 패딩: 박스와 콘텐츠 영역 사이의 여백
• 테두리: 박스 테두리
• 마진: 여러 박스 모델 사이의 여백

패딩, 테두리, 마진은 각각 상하좌우로 나뉘어 있어 네 방향의 스타일 설정 가능

width(넓이), height(높이): 콘텐츠 영역의 크기를 지정한다.(크기, 백분율: 창의 사이즈가 줄면 같이 줄어듦, auto)

box-sizing: 박스 모델의 크기 계산, 실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성. 

박스 크기: width, padding, border

• border-box: 테두리까지 포함해서 너빗값을 지정합니다.
• content-box: 콘텐츠 영역만 너빗값을 지정합니다. 기본값

box-shadow: 박스 모델에 그림자 효과를 줌, 

[box-shadow: < 수평거리 >< 수직 거리 >< 흐림 정도 >< 번짐 정도 >< 색상 > inset]

수평거리, 수직거리: 양수 값은 오른쪽, 아래, 음수값을 왼쪽, 위

흐림정도: 0이 기본값으로 진한 그림자, 커질 수록 부드러운 그림자, 음숫값을 사용 불가능

번짐정도: 양숫값은 모든 방향 퍼져서 , 음숫값은 축소해서, 기본값 0

inset: 안쪽 그림자.

<title>박스모델</title>

    <style>

        div{

            width: 200px;

            height: 100px;

            padding: 20px;

            margin-bottom: 20px;

        }

        .box1{

            border: 10px solid #ff0000;

            box-shadow: 2px -2px 5px 0px;/*오른쪽 위*/

        }

        .box2{

            box-sizing: border-box;

            border: 10px solid rgb(1, 141, 255);

            box-shadow: 5px 5px 15px 5px rgb(0, 17, 255);/*오른쪽 아래*/

        }

    </style>

 <div class="box1"></div>

    <div class="box2"></div>

박스 모델의 값 지정 방향: top->right->bottom->left

border-style: 테두리 스타일 지정, 기본값 none

none	테두리가 없음
solid	실선
dotted	점선
dashed	짧은 직선
double	이중선, 두 선의 간격이 border-width 값

테두리 스타일을 4방향 모두 아르게 지정하고 싶다면 border-top-style, border-right-style, border-bottom-style, border-left-style.

border-color: 테두리 색상 지정.

border-width: 테두리 두께를 지정

[border-width:<크기>|thin|medium|thick]

border: 테두리 스타일과 두께, 색상을 한꺼번에 표현한다.

border-radius: 테이블의 테두리, 이미지가 둥글게, 박스 모델의 꼭짓점 부분에 원(반지름 r)이 있다고 가정해서 둥글게 처리

사진을 둥글게 하고 싶다면 반지름값을 너비나 높이의 50%로 지정.

[border-radius: < 크기 >|< 백분율 >]

border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-buttom-right-radius

margin: 여백을 조절하는 속성, 현재 요소 주변의 여백

[margin: <크기>|<백분율>|auto(가운데 정렬)]

 

마진 중첩 현상: 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것, 요소를 가로로 배치할 경우는 상관 없음.

margin: 30px;  을 줄 경우 60px이 아닌 30px이 된다.

padding: 콘텐츠와 테두리 사이의 여백.

<style>

        #round{

            border-radius: 25px;/*모든 꼭짓점을 둥글게*/

        }

        #circle{

            border-radius: 50%;/*테두리를 원으로*/

        }

        #container{

           

            border: 1px solid #000;

        }

        #description{

            border: 1px solid #000;

            border-top-left-radius: 25px;

            border-top-right-radius: 25px;

            margin:30px;

            padding: 20px;

        }

        #recipe{

            border: 1px solid #000;

            margin:30px;

            padding: 20px;

        }

        #package{

            border: 1px solid #000;

            border-bottom-left-radius: 25px;

            border-bottom-right-radius: 25px;

            margin:30px;

            padding: 20px;

        }

    </style>

display: 요소의 배치 방법 결정(사용할 수 있는 속성 값이 아주 많음), 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 만듭니다.
inline	블록 레벨 요소를 인라인 레벨 요소로 만든다.
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
none	해당 요소를 화면에 표시하지 않습니다.

float: 요소를 왼쪽이나 오른쪽에 떠 있게 만듦. image, div (right, left, none)

clear: float 속성을 해제, 해제한 뒤 다시 float를 줄 수 있다. p.272

display: inline-block과 float: left 속성의 차이

display: inline-block을 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만, float: left로 배치하면 가로로 배치될 때 요소에 기본 마진과 패딩이 없다. 그래서 필요하면 요소마다 마진과 패딩을 지정해야 한다. 그리고 float: left를 사용하면 clear 속성으로 플로팅을 해제해야 한다.

<style>

        body{

            width: 750px;

            font-family: Arial, Verdana, sans-serif;

            color: #665544;

        }

        blockquote{

            font-size: 130%;

            float: right;

            width: 285px;

            font-style: italic;

            font-family: Georgia, Times, serif;

            border-bottom: 1px solid #000;

            border-top: 1px solid #000;

            margin: 0px 0px 10px 10px;

            padding: 10px;

        }

    </style>

.clear{

            clear: both;

        }

<p class="clear">

left, right, top, bottom: 웹 요소의 위치를 정한다. //position 과 같이

positon: 배치 방법을 지정

종류	설명
static	문서의 흐름에 맞춰 배치한다. 기본값.
relative	위칫값을 지정할 수 있다는 점을 제외하면 static 과 같음
absolute	relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
fixed	브라우저 창을 기준으로 위치를 지정해 배치

배경위에 글자 표시하기

<head>

    <meta charset="UTF-8">

    <title>position</title>

    <link rel="stylesheet" href="../css/position-2.css">

</head>

<body>

    <div id="contents">

        <h1>CSS3</h1>

    </div>

</body>

*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

#contents{

    background: url(../images/02.jpg) no-repeat;

    background-size: cover;/*요소를 모두 덮도록 이미지 확대*/

    width: 800px;

    height: 500px;

    margin: 0 auto;

    position: relative;/*이미지를 기준으로*/

}

h1{

    color: #fff;

    font-size: 120px;

    text-shadow: 2px 3px 0 #000;

    position: absolute;

    right: 100px;

    bottom: 100px;

}

시맨틱(의미론적인, 의미가 통하는) 태그: 문서의 구조를 만듦. HTML태그

• 화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해할 수 있다.
• 문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기가 쉽다
• 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.

<header>: 헤더 영역, 사이트 전체의 헤더or 특정 영역의 헤더, 검색창이나 사이트 메뉴 삽입

<nav>: 내비게이션 영역, 웹 문서 위치에 영향을 받지 않음, 문서 안에 여러 개 만들 수 있음.(id로 구분)

<main>: 핵심 콘텐츠를 담는다. 웹문서에서 핵심이 되는 내용, 웹 문서마다 다르게 보여주는 내용으로 구성, 웹 문서에서 한번만 사용

<article>: 독립적인 콘텐츠를 담는다. 독립된 웹 콘텐츠 항목(따로 떼어도 콘텐츠가 되는 내용), <section>태그를 포함할 수 있음

<section>: 콘텐츠 영역을 나타낸다. 몇 개의 콘텐츠를 묶는 용도로 사용, css 적용을 위해 묶는 용도(<div>)로 쓰지 말것 

<aside>: 본문 내용외에 왼쪽이나 오른쪽 혹은 아래쪽에 사이드 바 표시, 필수 요소가 아니므로 필요할 경우에만 사용

<footer>: 푸터 영역을 나타냄. 자이트 제작 정보나 저작권 정보, 연락처 등, 다른 시맨틱 태그 사용해 다양한 정보 포함

<div>: 여러 소스를 묶는다. 소스를 묶는 용도, 영역을 구별하거나 스타일 적용하기 위해

레이아웃: 웹 사이트의 정보와 내용을 보기 편하게 한 화면에 나누어 디자인한 것.

*{

    box-sizing: border-box; /*테두리까지 포함해서*/

}

#container{

    width: 1200px; /*내용 전체의 너비*/

    margin: 20px auto; /*내용을 화면 가운데 배치하도록*/

}

#header{

    width: 100%; /*부모 요소의 너비와 똑같게*/

    height: 120px; /*헤더의 높이*/

    background-color: #acacac;

}

#sidebar{

    width: 300px;/*사이드바 너비*/

    height: 600px;/*사이드바 높이*/

    background-color: #e9e9e9;

    float: left;/*왼쪽으로 플로팅*/

}

#contents{

    width: 900px;/*본문의 너비*/

    height: 600px;/*본문의 높이*/

    background-color: #f7f7f7;

    float: left;/*왼쪽으로 플로팅*/

}

#footer{

    width: 100%;/*부모 요소의 너비와 똑같게*/

    height: 100px;/*푸터의 높이*/

    background-color: #888888;

    clear: left;/*플로팅 해제*/

}