CSS 정리 3

이진아·2020년 12월 13일

목록 보기

3/6

1. HTML5 시멘틱 태그

시맨틱은 "의미, 의미론적인" 이라는 뜻으로 HTML5에 도입된 개발자와 브라우저에게 의미있는 태그로 제공되는 것입니다.

<header> " 주로 머릿말, 제목등을 표현하기 위한 내용을 적는 영역
<nav> : 컨텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크를 넣는 영역
<section> : 컨텐츠의 분류를 넣는 영역입니다.
<aside> : 사이드바라고 부르며, 본문 이외의 내용을 넣는 영역입니다.
<summary> : 세부정보를 담는 태그의 제목을 넣는 영역입니다.
<details> : 세부정보를 다믄ㄴ 영역입니다.
<article> : 컨텐츠의 실질적인 내용을 담는 영역입니다.
<footer> : 회사소개, 저작권, 약관등의 정보를 담는 영역입니다.

2. 미디어 쿼리

width, height, color... 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.

@media 매체유형 and (표현식) {css 스타일 코드;

all : 모든 매체
print : 프린터 기기
screen : 컴퓨터나 태블릿, 스마트폰..
speech : 스크린 리더

@media screen and (min-width :1024) { background-color :deepskyblue;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리</title>
    <style>
        body { background-color: gold; }
        @media screen and ( min-width: 768px){
            body { background-color: deepskyblue;}

        }
    </style>
</head>
<body>
    <h2>미디어 쿼리</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore reprehenderit quam exercitationem odit minus, necessitatibus ab? Blanditiis sed, obcaecati vitae necessitatibus molestias esse magni nihil officia beatae dolore dolorum!</p>

</body>
</html>

 /*<section id="desc" class="text">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum commodi sint alias natus nihil nostrum eum libero corrupti nisi? A, laborum mollitia accusantium facilis itaque doloremque optio culpa enim blanditiis?<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, illo. Quas minima totam eaque, id dicta cum tenetur non veritatis optio voluptatibus, eligendi veniam fuga eos molestias laborum alias laudantium.</p>
            </section>*/

3.css flex(플렉서블 레이아웃) -수평

대부분의 웹사이트는 수직 구성익며 "위 아래"로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소들이 기본적으로 블록개념으로 표시되며 이는 뷰에 수직으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평 구성의 경우는 조금 다릅니다. 수평 구조를 만드는 속성이 명확하지 않기 때문에

이나 float 혹은 inline-block 으로 구성했습니다. 이런 다양한 문제를 가지고 있기 때문에 레이아웃을 수평으로 쉽게 구성할 수 있는 flex(플렉서블 레이아웃)가 차선책으로 만들어졌습니다.

ex) display : flex;

flex-wrap
플렉스 라인에 더 이상의 여유가 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지 여부를 설정합니다.

nowrap 
기본설정으로, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킵니다. 

wrap 
플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다.

wrap-reverse 
플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래 쪽이 아닌 위쪽으로 넘어갑니다.

예제 )
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        #container {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            border: 3px solid red;
            /* flex-wrap: nowrap; 요게 기본*/
           /* flex-wrap: wrap;*/
           flex-wrap: wrap-reverse;

        }

        #container div {
            width: 200px;
            border: 1px solid black;
            background-color: gold;
        }

        h2 {
            font-size: 20px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>

    <h2>flex</h2>
    <div id="container">
        <div id="box1"><h2>1</h2></div>
        <div id="box2"><h2>2</h2></div>
        <div id="box3"><h2>3</h2></div>

    </div>

</body>
</html>
-----------------------------------------------

*justify-content
플렉스 요소의 수평 방향 정렬 방식을 설정합니다.

flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.
flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다.
center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.
space-between :플렉스 요소는 요소들 사이에서만 여유 공간을 주고 배치됩니다.
space-around : 플렉스 요소는 앞 뒤 그리고 요소들 사이에 모두 여유 공간을 두고 배치됩니다.

*align-items
플렉스 요소의 수직 방향 정렬 방식을 설정합니다. 이 속성은 한 줄만을 가지는 플렉스 박스에는 효과가 없으며 , 두 줄 이상 가지는 플렉스 박스에만 효과가 있습니다.

strethch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선에 배치됩니다.

*align-self
플렉스 컨테이너의 align-items 속성보다 우선 적용됩니다. 이 속성을 이용하면 플렉스 요소마다 서로 다른 align  속성값을 설정 할 수 있습니다.

예제)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .wrapper {
            width: 500px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            border: 3px solid red;
        }

        .wrapper div {
            width: 100px;
            border: 2px solid black;
            background-color: gold;
        }
        h3{
            text-align: center;}
            p{
                font-weight: bold;
                text-align: center;    }

        #container1 { justify-content: flex-start;}
        #container2 { justify-content: flex-end;}
        #container3 { justify-content: center;}
        #container4 { justify-content: space-between;}
        #container5 { justify-content: space-around;}

    </style>
</head>
<body>
    <h2>flex</h2>
    <h3>justify-content : flex-start(기본값)</h3>
    <div id="container1" class="wrapper">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
    </div>
    <h3>justify-content : flex-end</h3>
    <div id="container2" class="wrapper">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
    </div>
    <h3>justify-content : center<h3>
    <div id="container3" class="wrapper">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
    </div>
    <h3>justify-content : space-btween</h3>
    <div id="container4" class="wrapper">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
    </div>
    <h3>justify-content : space-around</h3>
    <div id="container5" class="wrapper">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
    </div>
</body>
</html>
-----------------------------------------------------