부트캠프(HTML,CSS)

부트캠프30일 (HTML,CSS)

동곤일상 2025. 3. 14. 17:47
반응형

1) 영역관련태그

 

2) 하이퍼링크 태그

 

3) 폼/이미지 태그

  1) 이미지태그

  2 form

 

4) CSS

4-1) CSS 기본형식

4-2) css 작성방식

4-3 ) font_css

4-4) CDN , fontawsesome

 

5) 아이디 클래스 선택자

 

 

 


1) 영역관련태그

 

1) HTML4

의미없는 태그(<div>,<span>)으로만 구역을 나눴음

2) <div>

  • Block 요소(한줄 차지)로 동작
  • 좌우 공간을 모두 차지하고 페이지를 수직으로 분할
  • 주로 전체 영역이나 큰 덩어리의 콘텐츠를 나눌 때 사용4

3) <span>

  • inline 요소(콘텐츠의 크기만큼 차지)로 동작
  • 콘텐츠의 크기만큼만 공간 차지, 웹 페이지를 수평으로 분할
  • 주로 짧은 텍스트나 특정 단어를 묶을 때 사용
<!DOCTYPE html>
<html>
    <div>
        <span>콘텐츠1</span>
        <span>콘텐츠2</span>
        <span>콘텐츠3</span>
    </div>
    <div>콘텐츠4</div>
</html>

 

한계)

의미파악이 어려움 (모든구역이<div>로정의)

유지보수어려움

다양한 기기 지원 어려움

 

4) HTML5

  • 시맨틱(의미있는) 태그의 등장
  • 태그명만 보아도 각 구역의 역할을 직관적으로 이해할 수 있음
  • 유지보수와 검색 엔진 최적화가 수월해짐
<header></header>
<main>
  <article></article>
  <article></article>
</main>
<aside></aside>
<footer></footer>
  • <header>: 머리글 영역
  • <nav> : 메뉴, 외부 페이지 이동
  • <main>: 주요 콘텐츠
  • <section> : 콘텐츠 영역 나누는 역할
  • <article>: 독립적인 글이나 콘텐츠
  • <aside>: 부가 정보 영역
  • <footer>: 바닥글 영역

2) 하이퍼 링크 태그

( a 태그 )

1) 특징과 기본사용

 

특징 : 외부사이트연결 , 문서내부에서 이동 가능

 

속성 : 

 

target 이용

_blank : 새로운 창 (새탭열기)

_self : 현재창(현재창에서열기)

<a href="주소" target="_blank" or "_self">콘텐츠</a>

 

작성법

문자

<a href="https://www.naver.com">네이버</a>

이미지

<a href="https://www.naver.com">
    <img src="../resources/sponge.png" width="200px">
</a>

(HTML 에 나타나는 해당이미지를 클릭하면 링크로 이동하게됨)


2) a태그 경로 표현(1)

 

1) 다른사이트로 연결

 

절대경로 사용 , URL 사용

 ex)

 <!-- 웹 경로로 링크 -->
          <p><!-- 문단을 나눈단 뜻 별의미없음-->
            <a href="https://www.google.com">구글</a><!-- default(_self):  현재창에서 열기-->
            <a href="https://www.naver.com" target="_blank">네이버</a> <!--_blank:  새창으로 열기-->
          </p> 

          <!-- 이미지 경로로 링크-->
           <p>
            <a href="D:/web/workspace/images/bgsample.jpg" target="_blank"> 이미지</a>
            <!-- 이미지 링크 생성(이미지를 만들어줌)-->
            <a href="https://www.naver.com" target="_blank"><img src="D:/web/workspace/images/icon.png"></a>
             <!--해당이미지를 누르면 naver로 이동
            -->
           </p>

다음 그림을 누르면 naver로 이동

 

2) 페이지 내의 특정위치로 연결

  1. 페이지 내 링크의 이동 대상 요소에 id 속성 추가
  2. a 태그 href 속성에 #과 함께 이동할 요소 id 작성

   주소에 #만 입력하면 항상 페이지 최상단으로 이동

 <!-- 문서내부 링크-->
             <!-- id속성 : HTML 구성요소(태그) 식별하기위한 속성 , 유일성(아이디값중복X)-->
             <ul>
                <li><a href="#title">id="title"요소로 이동</a></li>
                <li><a href="#images">id="images"요소로 이동</a></li>
                <li><a href="#content">id="content"요소로 이동</a></li>
             </ul>
            <br>
            <!-- id간의 간격을 일부러 심하게 두었음-->
            <h1 id="title"> 겨울</h1>
            
            <br><br><br><br><br><br><br><br><br><br><br><br>
            <p id="images"><img src="images/city1.jpg" width="500"></p>
            <br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br>

            <p id="content">
                12월부터 2월까지는 겨울<br>
                12월부터 2월까지는 겨울<br>
                12월부터 2월까지는 겨울<br>
                12월부터 2월까지는 겨울<br>
                12월부터 2월까지는 겨울<br>
                12월부터 2월까지는 겨울<br>
                12월부터 2월까지는 겨울<br>
            </p>

 


 

3) a태그 경로 표현(2)

예시

1. 하위 계층에 연결

  • 하위 계층(폴더)의 파일에 연결
  • home/index.html --> about, service 폴더 내
<a href="about/index.html">회사 안내</a>
<a href="about/access.html">오시는길</a>
<a href="service/index.html">서비스 내용</a>

 

2. 상위 계층에 연결

  • service 폴더에 있는 index.html에서
  • 최상위(루트) 디렉토리에 있는 index.html이나 about 폴더의 index.html, access.html에 접근하고자 할 때
<a href="../index.html"></a>
<a href="../about/index.html">회사 안내</a>
<a href="../about/access.html">오시는 길</a>

 

3. 동일 계층 연결

파일명만 적거나 

앞에 ./ 을 붙여준다

<a href="./access.html">오시는 길</a>
<a href="access.html">오시는 길</a>

 

4. 루트 상대 경로

  • 사이트의 최상단(루트) 디렉토리를 기점으로 경로 지정
  • 경로의 선두가 반드시 /로 시작
<a href="/"></a>
<a href="/about/index.html">회사 안내</a>
<a href="/about/access.html">오시는 길</a>

4) ifram

하나의 웹페이지 안에 다른웹페이지 삽입 시 유용

주요 속성

  • title : 마우스 커서 올렸을 때 툴팁
  • src : 웹 페이지 경로
  • width : 가로 크기
  • height : 세로 크기
<iframe width="400px" height="400px" src="http://me.go.kr/home/web/main.do"></iframe>

 

 하이퍼링크 태그
    1. 인라인레벨
    2. 다른페이지나 다른사이트 다른위치로 링크를 연결하는 태그
    3. 속성
        1) href : 이동할 페이지(경로)
        2)title : 풍선도움말
        3) target : 새창 or 현재창 여부
            _self : 현재창 (잘안씀 생략가능)
            _blank : 새로운창

 

3) @@ 폼/이미지 태그

 

3-1) 이미지 태그

: 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그

 

표현법

<img src="경로" alt="설명 문구" width="너비" height="길이">

 

속성

src : 이미지경로 지정

alt : 이미지 설명해주는 텍스트속성

width , height : 이미지크기

 

이미지설명

1) <figure></figure>

  • 이미지에 대한 설명 표시
  • 테이블에서 학습한 <caption>과 유사한 기능
  • <figcaption> 이라는 자식 태그가 필요

예시

        <p>
            <figure>
                <figcaption>꽃이 활짝 피었어요</figcaption>
                <img alt="절대경로 꽃1" src="D:/web/workspace/htmldong/html1/images/flower1.jpg"  height="200">
            </figure>
            
        </p>
        <p>
            <img alt="상대경로 꽃1" src="./images/flower1.jpg"  height="200">
        </p>
        <p>
            <img alt="이미지없음" src="./empty/flower1521.jpg"  height="200">
            <!-- 해당경로는 아예존재하지않는 경로임-->
        </p>

 

 


3-2) form

 

form 개요

 

 

1) form 의 역할

사용자로부터 데이터를 입력받을 수 있는 창 구성

<form method="get" or "post" name="이름" action="웹서버 주소" >
<!-- 입력받을 수 있는 창 구성 -->
</form>

 

2) 속성

method  : 웹서버에 데이터를 보내는 방식

  1. get  
  • url 에 데이터를 얹어서 보내는방식 , 
  • 데이터를 볼 수 있음
  • 데이터크기 제한

   2.post

  • HTTP Request에 데이터를 넣어보냄
  • 데이터를 볼 수 없음
  • 데이터 제한 X

name : <form>태그의 고유이름 지정(구분위해)

action : 데이터 처리할 프로그램 지정

 


input 기초

사용자로부터 data를 입력 받기 위한 태그

웹 표준의 Scanner

 

속성

type   : 입력창의타입 : ex)text , checkbox 등

name : input을 구별할수있는명칭

value  : input 요소의 기본값

maxlength  : 사용자가입력할수있는 글자수제한

placholder : 사용자입력전입력창 표시글

readonly : 읽기전용

required : 필수입력 필드 지정

disabled : 입력 비활성화

<!DOCTYPE html>
<html>
    <head>
        <title>form관련태그</title>
    </head>
    <body>
        <!-- 1.<input type ="text">태그-->
         <p>
            <!-- 디폴트:type ="text" 적용 -->

             <input> <!-- 기본 입력상자-->
             <br>
             <input type="text" size="5"> <!--입력상자의 크기 5-->
             <br>
             <input type="text" maxlength="4"><!--입력값의 크기 4-->
             <br>
             <input type="text" placeholder="검색어를 입력"><!--입력메시지-->
             <br>
             <input type="text" required><!-- 필수 입력 사항-->
             <br>
             <input type="text" value="날씨"><!-- 입력값 미리 설정함-->
             <br>
             <input type="text" value="변경불가" readonly><!-- 읽기 전용(수정X)-->
             <br>
             <input type="text" value="변경불가" disabled><!-- 사용불가-->
         </p>
    </body>
</html>

 


input 태그 type의 종류

 <p>
                 <!-- input 태그의 type 종류-->
              <!--type="password" 비밀번호입력용-->
              <caption>password</caption>
              <input type="password" placeholder="비밀번호 입력">  <br>
              <!-- type="number" : 숫자입력용-->
              <caption>number</caption>
              <input type="number" min="1" max="12"><br>
              <!-- type="email" : 이메일입력용-->
              <caption>email</caption>
              <input type="email" placeholder="이메일">  <br>
               <!-- type="date" : 날짜 입력용-->
               <caption>date</caption>
              <input type="date"><br>
              <caption>color</caption>
              <input type="color" name="color" value="색상 값"><br>
              <!--type="hidden 화면에보이지않는 값 처리시-->
              <caption>hidden</caption>
              <input type="hidden" value="절대화면에 보이지않음"><br>
              <!-- type="file" : 업로드파일 선택-->
              <caption>file</caption>
              <input type="file"><br>
              <!-- type = "button" : 버튼입력-->
              <caption>button</caption>
              <input type="button" value="버튼"><br>
               <!-- type = "submit"  : 폼 내부의 입력값 다른데이터로 전송 시 사용-->
               <caption>submit</caption>
              <input type="submit" value="submit"><br>
              <!-- tpye = "reset" : 폼에 입력된 값을 초기화-->
              <caption>reset</caption>
              <input type="reset" value="reset">
             </p>


radio , checkbox

속성

name : 구분자 명칭 같은그룹은 값이같아야함

value : 전송시 전달할값

checked: 처음에선택될 값(생략해도무관)

<p>
                <!-- radio(단일선택) , checkbox(다중선택)-->
                 <!-- radio : value 속성필요
                   => 어떤 radio를 선택했는지 알기 위해 반드시추가
                   같은name을 가진 radio이어야 단일 선택이 가능함
                  -->
                 <input type="radio" name="gender" value="male" checked><input type="radio" name="gender" value="female"><input type="radio" name="pass" value="1">합격
                 <input type="radio" name="pass" value="2">불합격
             </p>

             
              <p>
                <!-- checkbox : 다중선택-->
                 <input type="checkbox"> 모두 동의 <br>
                 <input type="checkbox" name="hobbies" value="1">운동 
                 <input type="checkbox" name="hobbies" value="2"> 여행 <br>
              </p>

 


form태그 하위 기타 태그

select : 여러선택지중에 단일or다중

textarea : 여러행 입력가능

label: 라벨==id

filedset :  입력요소 그룹을 설정

 <!-- 폼태그의 하위 기타 태그-->
               <!-- 1. select 태그 : 목록선택-->
                <caption> 주소를 선택 -> </caption>
                <select>
                    <option value="naver">naver.com</option>
                    <option value="kakao">kakao.com</option>
                    <option value="gmail">gmail.com</option>
                    <!--값 구분을 위해 value사용 권장-->
                </select>
                <!-- 여러개 option도 선택 가능-->
                <caption> 지역을 선택 -> </caption>
                <select multiple >
                    <option value="seoul">서울</option>
                    <option value="pusan">부산</option>
                    <option value="incheon">인천</option>
                </select>
            </p>
<!------------------------------------------------------------------------------------------------->
                <!-- textarea : 여러 행 입력 태그-->
                 <p>
                    <caption>textarea</caption><br>
                    <!-- 디폴트 : 2행20열-->
                     <textarea></textarea><br>
                     <!-- rows : 행 cols: 열-->
                      <textarea rows=5 cols="5"></textarea><br>
                      <!-- values 대신 태그 내부 텍스트가 입력된값 저장-->
                       <textarea> hello </textarea>
                 </p>

<!------------------------------------------------------------------------->
                 <p>
                    <!-- label 태그 : 라벨붙이기-->
                     <!--
                     for 속성 : 입력요소의 id값을 의미
                     id : 해당페이지의 유일성을 가짐
                     -->
                     <caption>label태그</caption><br>
                     <label for="male">
                        <input type="radio" name="gender" value="male" id="male"></label>
                     <label for="female">
                        <input type="radio" name="gender" value="female" id="female"></label>
                 </p>
<!------------------------------------------------------------------------------------------------->
                 <!-- filedset :  입력요소들을 그룹화-->
                  <p>
                    <caption>filedset</caption><br>
                    <fieldset>
                        <legend>성별</legend> <!--성별이라는 이름으로 그룹화해줌-->
                        <label for="male">
                            <input type="radio" name="gender" value="male" id="male"></label>
                        <label for="female">
                            <input type="radio" name="gender" value="female" id="female"></label>
                    </fieldset>
                </p>

 

 


4)@@ CSS @@

문서내용과 꾸미는 부분을 분리

 

4-1) CSS 기본형식

이거는 internal의 예임

  1. 선택자
  • 어디에 스타일을 지정할지 작성(위 그림은 h1에적용)
  • HTML문서 내에 스타일적용할 요소 선택

2 . 프로퍼티와 값

  • 선택자로 선택한 요소에 적용할 스타일
  • 프로퍼티(속성) : 설정하고 싶은 스타일의 타입
  • 값 : 설정하고 싶은 스타일 종류에 대한 수치 혹은 옵션
  • 값이 끝나는 지점마다 반드시 ;(세미콜론) 작성

4-2) CSS 작성 방식

1) inline 방식

  • 요소의 시작태그에 style 속성 추가하여 작성
  • style 속성을 추가한 해당 태그에만 css 적용
  • 우선순위가 가장높음 inline> internal > external
<!DOCTYPE html>

<html>
    <head>
        <title>inline css</title>
        <link rel="stylesheet" href="ex02_external.css"><!--blue-->
        <style>
            h1{color: green;}
        </style>
    </head>
    <body>
        <h1>!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
        <h1 style="color: gray;">반갑습니다 유동곤입니다</h1>
        <!-- 우선순위가 가장높은 inline(gray)색깔로 될것임-->
    </body>
</html>

출력결과

2) internal 방식

  • html 문서 내에서 style태그를 이용해서 css를 적용
  • 작성된 선택자에 해당되는 모든 요소에 css 적용
  • head 안에 style 태그 사용을 권장
<!DOCTYPE html>
<html>
    <head>
        <title>internal css</title>
        <style> 
            h1{ color: blue; }
        </style>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

3) external 방식

  • 외부에 .css 파일 생성
  • link 태그를 통해 외부 css 파일을 불러옴
  • css파일 ↓
h1{color:blue;}

html 파일 ↓

<!DOCTYPE html>

<html>
    <head>
        <title>external css</title>
        <link rel="stylesheet" href="ex02_external.css">
        <style> 
        </style>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

4-3 ) font_css

<!DOCTYPE html>
<html>
    <head>
        <title>font 관련 css</title>
        <style>
            p{
                font-family: '맑은 고딕',sans-serif; /*맑은고딕이 없으면 고딕계열을 사용*/
                font-family: '궁서',serif;     /* '궁서'가 없다면 명조계열을 사용하시오*/
                font-size: 32px;        /* default : 16px */
                font-weight: 900;           /* default : 400,100~900 */
                font-style: italic;             /* italic : 기울임, none : 기울임X */

                /*블록요소는 정렬이 됨*/
                text-align: center;       /*텍스트 정렬 : left , right , center , justify */
                text-decoration: underline; /* underLine : 밑줄 , line-thorough : 취소선 , none :선 없애기*/
                text-shadow: 5px 5px 1px red; /* shadow : x y blur(모자이크느낌) 색상 */
            }
            pre {
            font-size: 40px;
            line-height: 32px;           /* 행 높이 : 세로 가운데 정렬에서 주로 활용 */
            letter-spacing: -1px;        /* 글자 간격 */
            color: rgb(0, 0, 0);  /*검정색*/
            color: rgb(255, 255, 255);/*흰색*/
            /* RGB : #RRGGBB 16진수표현 */
            color: #000000;
            color: #FFFFFF;
            color: rgba(0, 0, 0, 0.5);      /* alpha(투명도) : 0(투명) ~ 1(불투명) */
         }
         h1{
            /*
                브라우저 별로 글자의 외곽선 효과 처리 (표준화 추진중)
                벤더 프리픽스 ( vender Prefix) : 속성 앞에 브라우저표현
                1) -webkit... - : chrome , safari
                2)-moz-... : 파이어폭스
                3) -o-.... : 오페라
            */
            -webkit-text-stroke-color: rgb(210, 70, 55);
            -webkit-text-stroke-width: 1px;
         }
         a{
            text-align: center; 
            color: green;
            /*inline태그는 정렬이 되지않음*/
         }
        </style>
    </head>
    <body>
        <p> Hello world</p>
        <pre>Nice to meet you</pre>
        <pre>Yoo good?</pre>
        <h1>I'm fine</h1>
        <a href="http://www.naver.com" target="_blank">네이버</a>
    </body>
</html>

 

<style>없을 때

 

 

적용 후

 


google font 이용

https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>font관련 css</title>
<!--
        <link rel="stylesheet" 
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap">
            
            <style>
                h1{
                    font-family: 'Noto Sans KR', sans-serif; 
                }
            </style>
-->
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
                h1{
                    font-family: 'Noto Sans KR', sans-serif; 
                }
            </style>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

위에처럼 링크로 접근해도되고

@import로 접근해도 된다!! 두개중 편한방법 사용

<style>
<link rel="stylesheet" 
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap">
            
<!------------------------------------------------------------------------------------>

<!--@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');-->
</style>

 


4-4) CDN , fontawsesome

CDN
    1. Content Delivery Network
    2. 웹 상에서 제공받는 각종 콘텐츠를 의미한다.
    3. CDN 제공 사이트 : https://cdnjs.com

 

 
    fontawesome
    1. 무료(유료) 아이콘을 제공하는 사이트이다.
    2. 아이콘을 CDN의 형태로 제공 받아서 사용한다.
        1) fontawesome에서 개인 이메일을 입력하면 CDN을 제공해 준다.
        2) CDN 제공 사이트를 통해서 fontawesome의 CDN을 알아낸다.

 

 

 

아이콘 : fontawesome에서 <i> 태그로 제공된다.

 

https://fontawesome.com/icons

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

해당 링크에 들어가 아이콘의 이름

< i class = xxxx> 를 알아낼수있음!!!

ex)

<head>
<style>
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
    </style>
</head>
<body>
<p>
        사진아이콘<i class="fa-solid fa-image"></i>
    </p>
</body>

@import는 head 태그 내에서하고 style태그 내에 작성해야한다


<!DOCTYPE html>
<html lang="ko">
<head>
       <title>Document</title>
    <!--
        fontawesome CDN 가져오기
        1. <link> 태그
        2. @import url()
    -->
    <!-- 1. <link> 태그 -->
    <!--
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    -->
    <!-- 2. @import url() -->
    <style>
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
    </style>
</head>
<body>
    <!-- 아이콘 : fontawesome에서 <i> 태그로 제공된다. -->
    <p>
        휴지통 <i class="fa-solid fa-trash"></i>
    </p>
    <p>
        <button>
            <i class="fa-brands fa-searchengin"></i>
        </button>
    </p>
    <p>
        사진아이콘<i class="fa-solid fa-image"></i>
    </p>
    <p>
        <a href="https://twitter.com/i/flow/login"> <!--트위터 아이콘-->
            <i class="fa-brands fa-twitter"></i>
        </a>
    </p>
    <p>
        <i class="fa-regular fa-envelope"></i>
        <i class="fa-regular fa-envelope fa-2x"></i>
        <i class="fa-regular fa-envelope fa-3x"></i>
        <i class="fa-regular fa-envelope fa-4x"></i>
        <i class="fa-regular fa-envelope fa-5x"></i>
    </p>
</body>
</html>

 

 


5) 아이디 , 클래스 선택자

 

선택자는 <style> 블럭 안에서!!!

 

아이디 선택자 : 태그에 id를 설정하고 id값을 선택자로

(한개만 선택가능)

#아이디{설정내용;}

 

클래스 선택자 : 태그의class설정 후 class값을 선택자로

(한개 이상 선택가능)

.클래스{설정내용;}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red-text{
            color: #FF0000;
        }
        .big_text{
       
            font-size: 40px;
        }
    </style>
</head>
<body>
    <!-- class 속성의 값은 하나 이상의 값이 가능
        class = "red_text big_text" 태그는
        "red-tex 값과 big text 값을 2개 가진다.
        
        class = "red_text" 태그는 red_text 값을 1개가짐

        id 속성은 1개의값만 가질 수 있음 

        HTML의 태그의 속성의 이름은 유일해야함
        <T a="1" b="2" a="3"> 오류

            class 속성
            1. 전역 속성임 (모든태그에 설정가능)
            2. 같은 스타일을 가진 경우 같은 class속성 설정가능
            3. 하나의 태그는 여러 class 속성을 가질 수 있다. 
                공백으로 구분
            4. style 에서 class 속성의 선택자는 . 이다.
            .클래스속성의 값{}
    -->
    <p class="red-text big_text">hello world</p>
    <p class="red-text ">Nice to meet you</p>
    <p>일반적인 P태그그</p>
</body>
</html>

 

'부트캠프(HTML,CSS)' 카테고리의 다른 글

부트캠프33일차 (CSS media, bootstrap)  (0) 2025.03.19
부트캠프32일차(css(layoutStyle))  (0) 2025.03.18
부트캠프31일차(CSS)  (0) 2025.03.17
부트캠프29일차(HTML)  (0) 2025.03.13