CSS 기초 문법 정리 및 실습

박지성 학부생·2023년 1월 2일
1

FrontEnd Develop log

목록 보기
7/12
post-thumbnail

HTML 기초 정리HTML 기본태그 정리 & 실습

CSS 기초 구조

  • CSS는 크게 선택자 영역과 속성 영역으로 분류된다.

    선택자{속성명:속성값;}

선택자 영역

  • 디자인할 HTML 태그 영역을 불러와 선택자 지정을 한다.

  • ex) <p> 태그를 선택자로 불러온다는 뜻은 <p> 태그에 디자인 효과를 삽입하기 위해서 따로 추출한다는 의미이다.


속성 영역 (Internal CSS에서는 아래 예시와 같이 <style> 태그 안에 넣어야함)

  • 선택자로 HTML 태그의 요소들을 불러오면, 중괄호 { }로 새로운 영역을 생성한다. 이 영역에서 적용한 디자인 효과는 불러온 HTML 태그 요소에 적용된다.

  • 아래의 예시는 <h2> 태그를 선택자로 불러와 color(글자색상)를 royalblue으로 만든다. color속성명이고 royalblue속성값이다.

    • <style>
         h2{
         color:royalblue; <!-- 가독성을 위해 줄바꿈 처리를 한다. -->
         }
       </style>

줄바꿈 (가독성)

  • <h2> 태그의 글자색(color)을 파란색(blue), 배경색(background-color)을 검은색(black) 글 간격(padding)을 20px, 글자 크기(font-size)를 30px 로 설정.

    아래 두 코드의 결과는 같지만 여러 속성을 넣었을 때, 첫번째 코드가 두번째 코드보다 가독성이 떨어진다.

  • h2{color:blue;background-color:black;padding:20px;font-size:30px;}
    
  • h2{
    color:blue;
    background-color:black;
    padding:20px;
    font-size:30px;
    }
    

CSS 삽입 위치

삽입 위치 구조

CSS적용은 위의 예시처럼 Internal 방법이 있고, 태그 뒤에 직접 삽입(Inline)하거나 외부 링크로 삽입(External)하는 방법 등이 있다. 핵심은 CSS는 <head>태그 안에 있는 <style> 태그 사이에 삽입된다는 것이고 적용되는 내용물은 <body>태그 안에 있다는 것이다.

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>예시</title>
        <style>
            h2 {
                color: rgb(75, 75, 218);
                background-color: rgb(201, 201, 201);
                padding: 20px;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h2>안녕하세요 박지성입니다.</h2>
    </body>
    </html>

응용 예시

  • <!DOCTYPE html>
    <html>
      <head>
        <title>응용 예시</title>
        <style>
          h2{
            color:rgb(47, 164, 237);
            background-color:black;
          }
          pre{
            color:rgb(70, 20, 220);
            font-size:30px;
          }
        </style>
      </head>
      <body>
        <h2>저의 이름은</h2>
          <pre>박지성 입니다.</pre>
      </body>
    </html>

💥 클래스 선택자

클래스 선택자는 클래스를 선택자로 지정한다.

아래 예시에서는 <strong> 태그가 세 번 나온다. 이럴 때 하나의 strong 태그에만 CSS 선택자를 지정하고 싶다면 <strong> 태그에 클래스를 지정하면 된다.

<strong class="s1">"박지성 입니다."</strong>

지정된 클래스를 호출할 경우 마침표 . 를 클래스명 앞에 붙이면 된다.

클래스명이 s1이므로 선택자는 .s1로 정의 된다.

  • <!DOCTYPE html>
    <html>
      <head>
        <title>응용 예시2</title>
        <style>
          h2{
            color: navy;
            background-color:pink;
          }
          .s1{
            color:green;
            font-size:30px;
          }
        </style>
      </head>
      <body>
        <h2>저의 이름은</h2>
          <strong class="s1">박지성 입니다.</strong>
          <br>
          <strong>이영표 입니다.</strong>
          <br>
          <strong>안정환 입니다.</strong>
      </body>
    </html>

ID 선택자

id선택자도 class 처럼 선택자로 지정할 수 있다. id 선택자로 지정시 # 기호를 id값 앞에 붙인다.

아래 예시에서는 id명이 team이므로 선택자 지정시 #team가 된다.

  • <!DOCTYPE html>
    <html>
      <head>
        <title>id 응용 예시</title>
        <style>
          h2{
            color: navy;
            background-color:pink;
          }
          #team{
            color:red;
            font-size:30px;
          }
        </style>
      </head>
      <body>
        <h2>I was in</h2>
          <strong id="team">맨유</strong>
          <br>
          <strong>맨시티</strong>
          <br>
          <strong>번리</strong>
      </body>
    </html>

👊 HTML & CSS 기본 응용

(결과물은 닷홈을 이용하여 포스팅하였습니다.)

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>21700305 박지성</title>
        <style>
            .h1_1{
                text-align: center;
                color: navy;
                border: 10px groove plum;
                padding: 25px;
            }
            .h3_1{
                text-align: center;
                color: navy;
            }
            .li1{ color: orangered; }
            .li2{ color: skyblue; }
            .a1{ color: orangered; }
            .a2{ color: skyblue; }
            legend, label{ font-weight: bold; }
            #f1{ border: 5px dashed skyblue; }
            #f2{ border: 5px dashed orangered; }
            #f3{ border: 5px dashed greenyellow; }
            #d1{ 
                text-align: center;
            }
    
        </style>
    </head>
    <body>
        <h1 class="h1_1">
            <img src="https://cdn-icons-png.flaticon.com/512/919/919827.png" width="50">
             HTML CSS 간단한 실습
            <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png" width="50">
        </h1>
        <ul>
            <li class="li1">
                <a class="a1" href="https://www.notion.so/HTML-efebfcb89a5f412d872d21b815ca28db"><em><b>-> HTML 참고(클릭)</b></em></a>
            </li>
            <br>
            <li class="li2">
                <a class="a2" href="https://www.notion.so/CSS-54324e69a53940fb9b33aedfcd44760a"><em><b>-> CSS 참고(클릭)</b></em></a>
            </li>
    
        </ul>
        <br>
        <br>
        <form>
            <h3 class="h3_1">--- 정보입력 Form ---</h3>
            <br>
            <fieldset id="f1">
                <legend>이름 & 나이</legend>
                <label id="name">이름 : </label><input type="text" placeholder="이름을 입력하세요.">
                <br>
                <label id="age">나이 : </label><input type="text" placeholder="나이를 입력하세요.">
            </fieldset>
            <br>
            <fieldset id="f2">
                <legend>학년 선택</legend>
                <input type="radio" id = "Freshman" name="grade"/> 
                <label for="Freshman">Freshman</label>
                <br>
                <input type="radio" id = "Sophomore" name="grade"/> 
                <label for="Sophomore">Sophomore</label>
                <br>
                <input type="radio" id = "Junior" name="grade"/> 
                <label for="Junior">Junior</label>
                <br>
                <input type="radio" id = "Senior" name="grade"/> 
                <label for="Senior">Senior</label>
            </fieldset>
            <br>
            <fieldset id="f3">
                <legend>소속 학부</legend>
                <select name="major">
                    <option value="1">전산전자공학부</option>
                    <option value="2">기계제어공학부</option>
                    <option value="3">상담심리학부</option>
                    <option value="4">경영경제학부</option>
                    <option value="5">콘텐츠디자인학부</option>
                    <option value="6">생명공학부</option>
                </select>
            </fieldset>
            <br>
            <div id="d1">
                <input type="button" value="제출">
             </div>
        </form>
    </body>
    </html>

참고: https://dasima.xyz/css-structure-syntax/

profile
참 되게 살자

0개의 댓글