CSS, HTML 공간분할태그 (2023.04.26)

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

CSS, HTML 공간분할태그 (2023.04.26) 본문

full stack/HTML, CSS

CSS, HTML 공간분할태그 (2023.04.26)

Shinjio 2023. 4. 26. 19:56

코드 작성시 주석 작성을 통해 다른 사람이 코드를 보아도 이해하기 쉽도록 할 것!

🎈 CSS

📖 CSS(Cascading Style Sheets)란?

HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 (프로그래밍 언어X, 마크업 언어X, 스타일 시트 언어O)

Cascading(캐스케이딩)은 폭포, 위에서 아래로 쏟아지는 뜻을 가진 단어로

같은 요소에 여러 개의 스타일이 중복되었을 때 스타일 우선순위와 상속을 통해 어떤 스타일을 적용할지 결정한다는 의미

📖 왜 CSS를 따로 만들었을까?

HTML만으로 웹페이지를 제작하는 경우 HTML 요소의 세부 스타일을 일일이 지정해야 함.

이 작업은 매우 많은 시간이 걸리며, 완성한후에도 스타일의 변경 및 유지 보수가 어려움.

→ 정보 표현(HTML)과 디자인(CSS)을 별도로 두어 유지보수를 쉽게 하고 재사용성을 높임

📖 CSS 문법

CSS 작성시 중요한 것 2가지

1. 뭘 디자인할 것인가? -------------------------→ 선택자

2. 어떻게 디자인할 것인가? -------------------→ 선언

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css 코드 -->
    <style>
        /* 스타일은 설정값이기 때문에 head 태그 내에 작성
            => style이라는 태그 내에서만 코드 작성!
            
            디자인을 할거야!
            - 무엇을? : 선택자
            - 어떻게? : 선언

            작성형태 :
            선택자 {
                (선언)
                속성 : 값;
            }
            */

            h1{
                color: red;
            }

            h2{
                color: orange;
            }
    </style>

</head>
<body>
    <h1>빨강색</h1>    
    <h1>빨강색</h1>    
    <h1>빨강색</h1>    
    <h1>빨강색</h1>    
    <h1>빨강색</h1>    
    <h2>주황색</h2>    
</body>
</html>

📖 CSS 속성

⚙️ font

글자의 폰트를 정의하는 속성

웹폰트를 사용하여 글꼴을 가지고 있지 않는 사용자도 해당 글꼴을 볼 수 있도록 해줄 수 있음!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        @font-face {
            font-family: 'omyu_pretty';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        p{
            font-family: 'omyu_pretty', '굴림';
            font-size: 20px; 
            /* 디폴트 font-size : 16px */
            font-weight: 900;
            /* bold(700), 100~900 숫자로 설정 가능 */
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>빨리 주말이 오면 좋겠어요...</p>
    <span>밥 뭐 먹지?</span>
</body>
</html>

📖 CSS 선택자 ✨✨✨✨✨ 중요!

선택자의 종류 : 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 계층 선택자가 있음

⚙️ 전체선택자

*로 표시되며 웹 문서 내 모든 요소 선택

⚙️ 태그 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택

⚙️ 아이디 선택자

#기호로 표시되며 특정한 요소 선택

HTML구조의 공간분할을 적용할 때

아이디는 해당 문서에서 하나만! 동일한 이름의 아이디가 여러번 사용될 수 없음! (HTML에서는 오류가 나지 않지만 자바스크립트 작업을 하게 되면 오류 발생)

⚙️ 클래스 선택자

마침표(.) 기호로 표시되며 특정한 요소 선택

공통되는 스타일을 적용할 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 선택자의 종류! */
        /* (1)전체 선택자 : 모든 요소를 선택
            기호 : *   
        */
        *{
            color: green;
        }

        /* (2) 태그 선택자 : 특정 태그를 선택 
            기호 X, 태그 이름으로 작성 
            */
        li{
            color: hotpink;
        }

        /* (3) 클래스 선택자
            => 선택자들을 구분해서 지정해줘야 하는 경우 중에
                복수 요소를 지정하고 싶은 경우
            => 기호 : .클래스이름
        */

        .dinner{
            color: blue;
        }

        /* (4) 아이디 선택자
            => 선택자들을 구분해서 지정해줘야 하는 경우 중에
                "단 하나의 요소만" 지정하고 싶은 경우 (중복불가!!) 
            => 그 아이디는 한 문서당 한 번만 사용
            => 기호: #아이디이름
        */
        #mypick{
            background-color: yellow;
        }


    </style>
</head>

<body>
    <h1>CSS</h1>
    <p>웹페이지를 꾸며주는 스타일 시트 언어</p>
    <ul>
        <li>CSS 기본구조</li>
        <li>CSS 선택자</li>
        <li>CSS 스타일</li>
    </ul>

    <h1 class="dinner">오늘 뭐먹지?</h1>
    <ul class="dinner">
        <li class="dinner">샐러드</li>
        <li class="dinner" id="mypick">초밥</li>
        <li class="dinner">연어</li>
    </ul>
</body>
</html>

⚙️ 계층 선택자

특정 위치의 요소를 계층적 구조로 요소 선택

- 자식선택자와 자손선택자

- 후행선택자와 근접후행선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
                /* 계층 선택자 이해하기 */
        /* (1) 자손 선택자 - 기호 : 띄어쓰기 */
        /* (1-1) div를 기준으로 자손인 span의 색 tomato */
        div span{
            color: tomato;
        }
        /* (1-2) div를 기준으로 자손인 li 의 색 blue */
        div li{
            color: blue;
        }

        /* (2) 자식 선택자 - 기호 : >  */
        /* ol을 기준으로 자식인 span의 색 hotpink */
        ol > span{
            color: hotpink;
        }

        /* (3) 근접후행선택자 - 기호 : + */
        /* li를 기준으로 근접해서 붙어있는 li의 색 green */
        li + li{
            color: green;
        }

        /* (4) 후행선택자 - 기호 : ~ */
        /* 첫번째 li를 기준으로 형제관계인 li의 색 lime */
        li ~ li{
            color: lime;
        }

        /* +) nth-child
        만약에 두번째 li를 기준으로 형제관계인 li의 색상을 purlple로
        */
        li:nth-child(2) ~ li{
            color: purple;
        }

        #check{
            color: yellow;
        }

    </style>

</head>
<body>
    <div>
        <strong>우리 반 규칙!</strong>
        <ol>
            <li>지각하지 않기!</li>
            <li id="check">결석하지 않기!</li>
            <span>불가피할 땐 쌤한테 꼭 연락하기!</span>
            <li>복습하기!</li>
        </ol>
    </div>
</body>
</html>

선택자별 가중치

자식 및 후행선택자는 선택자들의 합계로 따진다 ▼▼▼▼▼▼

정리내용

⚙️ 그룹 선택자

다양한 요소들을 콤마(,)로 구분하여 요소 선택

⚙️ 반응 선택자

사용자의 반응으로 생성되는 특정한 상태를 선택

:active
마우스를 클릭할때 선택

:hover
마우스를 올린 태그를 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 그룹선택자 : 다양한 요소를 콤마로 구분해서 선택 */
        h1,h3 {
            color: hotpink;
        }

        /* 반응 선택자 */
        /* (1) 대상요소:hover => 대상 요소 위에 마우스를 올렸을 때 (띄어쓰기X) */
        p:hover{
            color:brown;
        }

        /* (2) 대상요소:active = 대상 요소 위에 마우스를 클릭했을 때 */
        p:active{
            color:mediumaquamarine;
        }
        
    </style>
</head>
<body>
    <h1>Full Stack SW 융합 실무 부트캠프</h1>
    <h3>담임 : ooo 선임 연구원</h3>

    <p>안녕하세요</p>
</body>
</html>

📖 크기 단위

요소 혹은 텍스트의 크기를 지정하는 단위

px - 화소 하나의 크기에 대응하는 단위 (고정값)
em - 부모 요소 크기에 따른 배수 단위
rem - html 태그의 폰트 크기에 따라 결정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 크기 단위 */
        /* 1) px : 화소 하나의 크기에 대응되는 단위 (고정값) */
        #span1{
            font-size: 10px;
        }

        /* 2) em : 부모 요소의 크기를 기준으로 하는 상대 배수 단위 */
        p{
            font-size: 10px;
        }

        #span2{
            font-size: 2em;
            /* ex) 2em : 부모 크기의 2배 */
        }

        /* 3) rem : 문서의 폰트 크기에 따른 배수단위 */
        #span3{
            font-size: 2rem;
            /* ex) 2rem : 현재 문서 폰트 크기의 2배
            기종에 따른 크기 변환시 많이 사용 */
        }

    </style>
</head>
<body>
    <span id="span1">px로 조정</span>
    <p>
        <span id="span2">
            em으로 조정
        </span>
    </p>
    <br>
    <span id="span3">rem으로 조정</span>
</body>
</html>

🎈 HTML 공간분할태그

경계를 분할하거나 영역을 사용할 때 사용하는 태그

<div>, <p>, <span>

div 태그를 가장 많이 사용

📖 가시속성

요소가 화면에 보이는 방식 지정

display : block
웹페이지의 가로 공간 모두를 차지하는 속성
ex. div, p, h1, ul, ol, table, ...

display : inline
컨텐츠(내용)이 끝나는 지점까지 너비를 가지는 속성
ex. span, a, strong, textarea, ...
단, 너비와 높이를 설정할 수 없다.

display : none
해당 HTML 요소를 보이지 않게 지정

display : flex
다음시간에 설명!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* display : 요소가 화면에 보이는 방식 지정 */

        /* (1)display : block
        종류 : div, p, ... etc => 디폴트값 block
        모조건 가로로 한줄의 영역을 차지하는 속성
        width값과 height값 설정이 가능
         */

         div{
            background-color: pink;
            width: 200px;
            height: 200px;
            display: inline;
         }

         /* (2)display : inline
         종류 : span, a, ... etc => 디폴트값 inline
         내가 담은 콘텐츠를 크기로 삼는 속성
         width, height 설정이 불가능
          */

        span{
            background-color: skyblue;
            width: 200px;
            height: 200px;
            display: block;
        }


    </style>
</head>
<body>
    <div>div태그</div>
    <div>div태그</div>
    <div>div태그</div>
    <span>span태그</span>
    <span>span태그</span>
    <span>span태그</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .answer{
            display: none;
        }

        /* 1. 마우스를 질문 위에 올린다면 => 질문:hover
           2. 질문과 근접후행 관계인 답을 보이게 설정 => +
           3. 답을 한 줄 밑에 뜨도록 => display : block
        */
        .question:hover+.answer{
            display: block;
        }

    </style>

</head>
<body>

    <h3>display : none</h3>
    <span class="question">Q. 제가 가장 좋아하는 음료는 무엇일까요?</span>
    <span class="answer">A. 아이스 바닐라 라떼, 모구모구, 제로콜라</span>

    <!-- 
        Q. 저의 mbti는 무엇일까요?
        A. XXXX

        퀴즈를 추가하기!
        단, css는 수정할 필요가 없음!
     -->
     <br>
     <br>
     <span class="question">
        Q. 저의 MBTI는 무엇일까요?
     </span>
     <span class="answer">
        A. INTP입니다. 
     </span>
    
</body>
</html>

'full stack > HTML, CSS' 카테고리의 다른 글

CSS position, 스타일시트 선언 방식 (2023.04.28) (1)	2023.04.28
CSS 박스모델 (2023.04.27) (0)	2023.04.27
HTML 태그 : 리스트, 이미지, 앵커, 테이블, 인풋 (2023.04.25) (0)	2023.04.25
WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21) (1)	2023.04.23
CSS 레이아웃 : Position, Flex (0)	2023.03.08

'full stack/HTML, CSS' Related Articles

JiYoung Dev 🖥

CSS, HTML 공간분할태그 (2023.04.26) 본문

CSS, HTML 공간분할태그 (2023.04.26)

🎈 CSS

📖 CSS(Cascading Style Sheets)란?

📖 왜 CSS를 따로 만들었을까?

📖 CSS 문법

📖 CSS 속성

⚙️ font

📖 CSS 선택자 ✨✨✨✨✨ 중요!

⚙️ 전체선택자

⚙️ 태그 선택자

⚙️ 아이디 선택자

⚙️ 클래스 선택자

⚙️ 계층 선택자

⚙️ 그룹 선택자

⚙️ 반응 선택자

📖 크기 단위

🎈 HTML 공간분할태그

📖 가시속성

'full stack > HTML, CSS' 카테고리의 다른 글

티스토리툴바