1. position 
- CSS에서 요소의 위치를 제어하는 속성
- 요소가 문서 내에서 어디에, 어떻게 배치될지를 결정하는 데 사용
    - 기본값 : static(일반적인 문서 흐름에 따라 배치)
    - relative : 자신의 원래 위치를 기준으로 이동
    - absolute : 가장 가까운 위치 지정 부모 요소를 기준 
    - fixed : 브라우저 화면 기준(스크롤 해도 위치변화X) 
    - stick : 특정위치에 고정되는 하이브리드 속성에

1.1 relative
- position:relative(부모요소에 적용) : 자신이 원래 있어야 할 위치를 기준으로 상하좌우로 이동, 이동하더라도 원래 위치의 공간은 유지

cf. z-index : 쌓이는 순서를 지정하는 속성으로 0<=z 값을 적어주는데 
            값이 큰 순서대로 보인다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Relative</title>
    <style>
      .container {
        background-color: #eee;
        padding: 40px;
        /* relative는 부모요소에 적용 */
        position: relative;
        height: 300px;
      }
      .box {
        width: 150px;
        height: 150px;
        background-color: #4caf50;
        color: white;
        font-weight: bold;
        line-height: 150px;
        text-align: center;
        margin-bottom: 20px;
        /* relative는 부모요소에 적용 */
        position: relative;
      }
      .relative-box {
        background-color: #ff9800;
        /* 자식요소의 relative */
        top: -100px;
        left: 80px;
      }
      .default-box {
        /* z-index : 겹쳤을 때 값을 주면
        (큰 값이)맨 위로 올라감. */
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box default-box">기본 박스</div>
      <div class="box relative-box">relative 박스</div>
    </div>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

day04_position_(4)absolute  (0) 2025.04.04
day04_positon_(2) fixed  (0) 2025.04.04
day04_box  (0) 2025.04.04
day04_form  (0) 2025.04.04
day02_CSS_table  (0) 2025.04.03

1. 박스 모델(box model)
- 박스모델은 HTML요소가 웹 페이지에 표시될 떄의 기본적인 크기와 여백 구조를 설명하는 개념, 웹 레이아웃 구성 시 중요

- 하나의 요소는 콘텐츠 영역을 중심으로, 
    그 바깥에 패딩 -> 테두리-> 마진 => 요소의 실제 화면상 크기


2. 패딩(Padding)
- 패딩은 CSS에서 요소의 콘텐츠와 테두리 사이의 안쪽 여백 설정
 즉, 텍스트나 이미지 같은 콘텐츠와 경계선 사이의 내부 공간을 확보

- Padding 위 오른쪽 아래 왼쪽 ; 만약 하나의 값만 주면 모든 방향으로 동일하게 적용

- 패딩과 마진과는 다르게 요소의 배경색이나 배경 이미지가 함께 확장, 콘텐츠 내부의 여유 공간 확보에 필수적임

3. 테두리(border)
- CSS에서 HTML의 테두리를 설정하는 속성
- 선의 두께, 종류, 색상
- padding < border < margin
# 주의!
- border-style 없이 border-width나 border-color만 설정하면      
    테두리 표시 X, 따라사 border-style 필수임

4. 마진(margin)
- CSS에서 요소의 바깥 여백(외부 간격)을 설정하는 속성
    요소와 오소 사이의 간격을 조절
    - 패딩 : 안쪽 여백
    - 마진 : 요소 간 간격

- 인접한 요소 사이의 세로 마진이 겹치는 마진 병합이 일어날 수 있음.
- margin : auto = 브라우저가 자동 계산해서 설정
    단, 요소의 width가 지정되어있어야함.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box model</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #f0f0f0;
        padding: 40px;
      }
      .container {
        width: 600px;
        margin: 0 auto;
      }
      .box {
        background-color: white;
        padding: 20px;
        margin: 30px 0;
      }

      .box1 {
        border: 2px dotted #4caf50;
      }
      .box2 {
        border: 2px dashed #4caf50;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">첫 번째 박스</div>
      <div class="box box2">두 번째 박스</div>
    </div>
  </body>
</html>

 

'Web > HTML + CSS' 카테고리의 다른 글

day04_positon_(2) fixed  (0) 2025.04.04
day04_position_(1) relative  (0) 2025.04.04
day04_form  (0) 2025.04.04
day02_CSS_table  (0) 2025.04.03
day02_CSS basic  (0) 2025.04.03

1. 폼 태그(form tag)
- form 태그는 HTML에서 사용자에게 입력을 받고, 그데이터를 서버로 전송하기 위한 양식을 만드는 데 사용하는 태그
- 사용자가 작성한 데이터를 action 속성에 지정된 URL로 method속성을 통해 전송한다. 
- form은 로그인, 회원가입, 검색창, 설문지 등 다양한 웹 기능에서 핵심 역할을 하며, 자바스크립트와 연동해 동적인 유효성 검사나 실시간 반응형 인터랙선 구현 가능
- 웹에서 사용자와 상호작용하는 가장 중요한 도구!!!!

2. 주요 폼 요소
2.1 <input> 태그
<input type ="text"> .....

2.2 기타 폼 관련 태그
ex. textarea, select ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>form tag</title>
    <style>
      @font-face {
        font-family: "YESMyoungjo-Regular";
          format("woff");
        font-weight: normal;
        font-style: normal;
      }
      * {
        box-sizing: border-box;
        font-family: YESMyoungjo-Regular;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #f2f2f2;
        padding: 40px;
      }

      main {
        /* 사이트를 가운데 정렬 방법 */
        max-width: 600px;
        /* margin : 0 auto : 위아래=0  좌우=같은값으로 자동 설정  */
        margin: 0 auto;
        background-color: white;
        padding: 30px;
        border-radius: 10px;
        /* box-shadow: 오른쪽 아래 번짐정도 rgba(0, 0, 0, alpha)-> 번지는 색상; */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      h1 {
        text-align: center;
        margin-bottom: 30px;
      }
      form {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }
      label {
        font-weight: bold;
        margin-bottom: 5px;
      }
      input,
      select,
      textarea,
      button {
        padding: 10px;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      input[type="radio"],
      input[type="checkbox"] {
        width: auto;
        margin-right: 5px;
      }

      .form-group.inline {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      input[type="color"] {
        width: 50px;
        height: 40px;
        padding: 0;
        border: none;
      }
      fieldset {
        border: 1px;
        padding: 15px;
        border-radius: 8px;
      }
      legend {
        font-weight: bold;
      }

      .form-group {
        margin-bottom: 15px;
      }
      button[type="submit"] {
        background-color: #4caf50;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3 ease;
      }
      button[type="submit"].hover {
        background-color: #45a049;
      }
      .footer-text {
        text-align: center;
        font-size: 0.9rem;
        margin-top: 20px;
        color: #777;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>회원 가입</h1>
      <!-- form action="회원정보를 전송할 데이터 주소(절대 or 상대경로 or 프로토콜)" -->
      <!-- 1. method="post" : URL에 노출X -->
      <!-- 2. method="get" : URL에 우리가 찾을 정보를 그대로 넘기는 방법(노출X)-->
      <form action="/signup" method="post">
        <div class="form-group">
          <!-- <input type="text"> : 입력할 칸이 생김(자릿수는 무한대) -->
          <!-- maxlength="자릿수 한정" -->
          <!-- placeholder="아무것도 적지않았을 때 나오는 " -->
          <label for="userid">아이디</label>
          <input
            type="text"
            maxlength="20"
            name="userid"
            id="userid"
            placeholder="아이디를 입력하세요."
          />
        </div>

        <div class="form-group">
          <label for="userpw">비밀번호</label>
          <input
            type="password"
            maxlength="20"
            name="userpw"
            id="userpw"
            placeholder="비밀번호를 입력하세요."
          />
        </div>

        <div class="form-group">
          <label for="email">이메일</label>
          <input
            type="email"
            maxlength="100"
            name="email"
            id="email"
            placeholder="이메일를 입력하세요."
          />
        </div>

        <div class="form-group">
          <label for="hp">연락처</label>
          <input
            type="tel"
            maxlength="11"
            placeholder="01000000000"
            id="hp"
            name="hp"
          />
        </div>

        <div class="form-group">
          <label for="birth">생년월일</label>
          <input type="date" name="birth" id="birth" />
        </div>
        <!-- value 값을 넣어주지 않으면 창칸에 입력한 값들이 넘어감 -->
        <div class="form-group">
          <!-- name="그룹명" : 매우 중요! ~ 속성을 지정하여 데이터를 넘겨주는 역할 -->
          <!-- label : 글자를 선택해도 선택된다. -->
          성별
          <label
            >남자<input type="radio" name="gender" value="남" id="male" checked
          /></label>
          <label>
            여자<input type="radio" name="gender" value="여" id="female"
          /></label>
        </div>

        <div class="form-group inline">
          <label for="color">좋아하는 색상</label>
          <input type="color" name="color" id="color" />
        </div>

        <div class="form-group">
          <label for="region">거주지역</label>
          <!-- <select name="" id=""></select> : 드롭다운 -->
          <select name="region" id="region">
            <option value="">--선택하세요--</option>
            <option value="서울">서울</option>
            <option value="부산">부산</option>
            <option value="대전">대전</option>
            <option value="인천">인천</option>
          </select>
        </div>

        <!-- 체크박스 묶어주기 -> field set으로 묶어주기-->
        <fieldset>
          <!-- <legend>필드셋 제목</legend> -->
          <legend>관심분야</legend>
          <label for="html">html</label>
          <input type="checkbox" name="interest" id="html" value="html" />
          <label for="CSS">CSS</label>
          <input type="checkbox" name="interest" id="CSS" value="CSS" />
          <label for="javascript">javascript</label>
          <input
            type="checkbox"
            name="interest"
            id="javascript"
            value="javascript"
          />
          <label for="java">java</label>
          <input type="checkbox" name="interest" id="java" value="java" />
          <label for="python">python</label>
          <input type="checkbox" name="interest" id="python" value="python" />
        </fieldset>

        <div class="form-group">
          <label for="intro">자기소개</label>
          <textarea
            name="intro"
            id="intro"
            placeholder="간단한 자기소개를 작성해주세요."
          ></textarea>
        </div>

        <div class="form-group">
          <label for="file">프로필 사진 업로드</label>
          <input type="file" name="file" id="file" />
        </div>

        <!-- submit(버튼)을 누르면 action으로 이동하게 된다. -->
        <button type="submit">가입하기</button>

        <p class="footer-text">
          이미 계정이 있으신가요? <a href="#">로그인</a>
        </p>
      </form>
    </main>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

day04_position_(1) relative  (0) 2025.04.04
day04_box  (0) 2025.04.04
day02_CSS_table  (0) 2025.04.03
day02_CSS basic  (0) 2025.04.03
day03_flex & grid  (0) 2025.04.03

1. 테이블
<table> 태그로 만들고 그 안에
<tr> : table row
<td> : table data
<th> : table header , 머리글
위의 태그를 사용해 셀 데이터를 입력한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>테이블</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        /* 라인을 한줄로 */
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>이름</th>
        <th>나이</th>
      </tr>
      <tr>
        <td>김사과</td>
        <td>20</td>
      </tr>
    </table>
  </body>
</html>



2. <thead> , <tbody>
~ <thead>,<tbody>는 HTML 테이블에서 표의 구조를 논리적으로 구분하기 위해 사용하는 태그이다.
2.1 <thead> : 테이블의 헤더 영역, 즉 제목 행들을 감싸는 용도 + <th>


2.2 <tbody> : 실제 데이터가 들어가는 본문 영역을 감싸며, + <td>이 포함된 여러 <tr>을 사용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>thead / tbody</title>
    <style>
      table,
      th,
      td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
      thead {
        background-color: deepskyblue;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>과목</th>
          <th>점수</th>
          <th>등급</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>국어</td>
          <td>85</td>
          <td>B</td>
        </tr>
        <tr>
          <td>수학</td>
          <td>90</td>
          <td>A</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>


3. <colspan> ,<rowspan>
<colspan> : 열끼리 합치는 것
<rowspan> : 행끼리 합치는 것

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>셀합치기</title>
  </head>
  <style>
    table,
    th,
    td {
      border: 2px solid black;
      border-collapse: collapse;
    }
    table {
      width: 500px;
    }
    td {
      text-align: center;
    }
  </style>
  <body>
    <table>
      <tr>
        <td colspan="3">1</td>
      </tr>
      <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </body>
</html> -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>셀합치기</title>
    <style>
      table,
      th,
      td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th rowspan="2">이름</th>
        <th colspan="2">성적</th>
      </tr>
      <tr>
        <th>수학</th>
        <th>영어</th>
      </tr>
      <tr>
        <td>김사과</td>
        <td>90</td>
        <td>85</td>
      </tr>
    </table>
  </body>
</html>

 

4. Table 응용

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>셀합치기</title>
  </head>
  <style>
    table,
    th,
    td {
      border: 2px solid black;
      border-collapse: collapse;
    }
    table {
      width: 500px;
    }
    td {
      text-align: center;
    }
  </style>
  <body>
    <table>
      <tr>
        <td colspan="3">1</td>
      </tr>
      <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </body>
</html> -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>셀합치기</title>
    <style>
      table,
      th,
      td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th rowspan="2">이름</th>
        <th colspan="2">성적</th>
      </tr>
      <tr>
        <th>수학</th>
        <th>영어</th>
      </tr>
      <tr>
        <td>김사과</td>
        <td>90</td>
        <td>85</td>
      </tr>
    </table>
  </body>
</html>

 

'Web > HTML + CSS' 카테고리의 다른 글

day04_box  (0) 2025.04.04
day04_form  (0) 2025.04.04
day02_CSS basic  (0) 2025.04.03
day03_flex & grid  (0) 2025.04.03
HTML _Image & Hyperlink  (0) 2025.04.01

1. CSS 문법
선택자 {
    속성 : 값;
}
1.1 선택자
선택자는 "어떤 HTML 요소에 스타일을 적용할지"를 지정한다. 만약 <p> 태그에 스타일 적용하고 싶다면 p라는 선택자 사용

1.2 속성(property)과 값(value)
중괄호 { }안에는 스타일을 정의하는 속성과 값이 들어감.
- 속성 : 변경하고 싶은 스타일의 종류 ex- color, fint-size, background-color, margin, padding
- 값 : 해당 속성에 어떤 값을 적용할지 정한다. ex- blue ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS란</title>
    <style>
      body {
        background-color: aqua;
      }
      h1 {
        color: deeppink;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>CSS란?</h1>
  </body>
</html>



2. 스타일 적용방법

2.1 인라인 스타일
HTML 태그안에 직접 style 속성으로 CSS를 작성하는 방식
pros : 빠르게 특정 요소에 스타일 적용 가능
cons : 유지보수가 어려움, 스타일 중복문제 발생

2.2 내부스타일 시트  -> <head> 안에 넣어야함.
<style> 태그를 사용하여 CSS 작성함. 
pros : 한 문서 안에서 스타일을 통일되게 관리 가능
cons : HTML과 CSS가 섞여 있어 코드가 복잡해질 수 있음.

2.3 외부스타일 시트
CSS파일을 따로 만들어서 HTML 문서에서 link태그로 연결
pros : 코드 분리로 관리가 쉬움, 재사용 가능
cons : 파일이 분리되어 연결이 필요함

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 스타일 적용 방식</title>
    <!-- 스타일이 중복될 경우 나중에 적용된 것이 최종적으로 적용된다. -->
    <!-- 외부 스타일 적용 -->
    <!-- <link rel="stylesheet" href="./파일명"> -->
    <link rel="stylesheet" href="./css/style.css" />
    <style>
      /* . = class , .class지정이름 */
      .internal {
        color: deepskyblue;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>CSS 스타일 적용 방식</h1>

    <!-- 내부 스타일 적용 -->
    <!-- class : CSS를 다른 태그에도 적용시키기 위한 함수 -->
    <p class="internal">이 문장은 내부 스타일시트로 스타일이 적용되었습니다.</p>
    <!-- p.internal = <p class="internal"></p> -->

    <!-- 인라인 스타일 적용-->
    <p style="color: deeppink; font-style: italic">
      이 문장은 인라인 스타일로 스타일이 적용되었습니다.
    </p>
  </body>
</html>



3. 다양한 선택자
1. 태그 선택자 : h1     
"모든 h1태그"

2. 클래스 선택자 : .into    
"class="intro"인 요소"

3. 아이디 선택자 : #favorite-list   
"id=#favorite-list인 요소"

4. 그룹 선택자 : p,li   
"모든 <p>와 <Li>"

5. 클래스 선택자 : .highlight   
"class="highlight"인 <Li>"

6. 의사 클래스 : a:hover    
"마우스 올린 <a> 태그"

7. 속성 선택자 : a[href^="https"]   
"href가 https로 시작하는 <a>"

8. 자식 선택자 : ul#favorite-list > li
"ul 바로 아래 있는 Li"

9. 자손 선택자 : ul#favorite-list p
"ul 안에 있는 모든 p"

10. 형체 선택자(인접) : p.intro + p
".intro 클래스 바로 다음에 오는 p"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>선택자</title>
    <style>
      /* 태그 선택자 */
      h1 {
        color: deepskyblue;
        text-align: center;
      }
      /* 클래스 선택자 */
      .intro {
        font-weight: bold;
        color: deeppink;
      }
      /* 아이디 선택자 */
      #student-list {
        background-color: #f9f9f9;
        padding: 30px;
      }
      /* 그룹 선택자 */
      p,
      li {
        font-size: 12px;
      }
      /* 클래스 선택자 */
      .highlight {
        color: gold;
      }
      /* 의사 클래스 선택자 ~ 하이퍼링크 꾸미기*/
      /* 한번도 다녀온 적 없은 링크 */
      a:link {
        text-decoration: none;
        color: deeppink;
      }
      /* 다녀온 적 있는 링크 */
      a:visited {
        text-decoration: none;
        color: deepskyblue;
      }
      /* 마우스 올려놨을 때 */
      a:hover {
        color: yellowgreen;
        text-decoration: underline;
      }
      /* 가만히 누르고 있을 때 */
      a:active {
        color: blue;
        text-decoration: underline;
      }
      /* 속성 선택자 */
      a[href="#"] {
        font-weight: bold;
        color: red;
      }
      /* href^="단어" : 단어가 들어가있는 속성을 고름  */
      a[href^="https"] {
        font-weight: bold;
        color: pink;
      }
      /* 자식 선택자 */
      ul#student-list > li {
        list-style-type: square;
      }

      /* 자손 선택자 */
      ul#student-list p {
        color: gray;
        font-style: italic;
      }

      /* 형제 선택자 */
      /* + : 바로 옆에 있는 */
      p.intro + p {
        background-color: aqua;
      }
      /* ~ : 그냥 형제 선택(복수 선택도 가능) */
      p.intro ~ p {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>선택자</h1>
    <p class="intro">이 문단은 첫번쨰 문단입니다.</p>
    <p>이 문단은 두번째 문단입니다.</p>
    <!-- span 태그는 인라인 태그임. -->
    <span class="intro">이 문장은 첫번째 문장입니다.</span>

    <ul id="student-list">
      <li>김사과</li>
      <li>반하나</li>
      <li>오렌지</li>
      <p class="highlight">출석부</p>
    </ul>

    <hr />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
   
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
   
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam
      recusandae nulla, laboriosam voluptates impedit doloribus, asperiores
      blanditiis expedita architecto hic sapiente. Cupiditate sed, et ut
      voluptas ratione porro inventore.
    </p>

   
    <a href="https://www.naver.com">외부 링크</a>
    <!-- 내부 링크 : 페이지의 상단으로 바로이동 -->
    <a href="#">내부 링크</a>

    <!-- #id 명 : 페이지가 해당 id를 기준에 맞춰 바로이동 -->
    <a href="#student-list">내부 링크2</a>
  </body>
</html>

<!-- class와 id 의 차이
    class : 클래스가 걸려있는 모든 태그에 적용하고 싶을 때 ~ CSS를 위해서 나온 속성
    id : 아이디 옆에 나오는 이름은 유일한게 스타일링 할 때 사용 ~ 따라서 중복되면 안된다. ~ CSS에서 자주 사용은 안함(icon 꾸밀 때 정도?)/ Java스크립트에서 자주 사용 -->



'Web > HTML + CSS' 카테고리의 다른 글

day04_form  (0) 2025.04.04
day02_CSS_table  (0) 2025.04.03
day03_flex & grid  (0) 2025.04.03
HTML _Image & Hyperlink  (0) 2025.04.01
HTML_List tag  (0) 2025.04.01

1. <div>
HTML에서 웹 페이지의 구조를 나누거나 묶을 때 사용하는 대표적인 블록 요소(=틀 만들기)로 주로 CSS를 활용하여 레이아웃을 구성하거나 스타일을 적용하기 위한 용도로 사용된다. 

# padding : 상하좌우
# margin : 상하좌우
    => 5px(위아래-겹침현상 if, 위로 5 아래로 10이면 큰 값인 10으로 떨어짐) 0(좌우-안겹침)

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div</title>
    <style>
      div {
        background-color: deepskyblue;
        padding: 10px;
        margin: 5px 0;
      }
    </style>
  </head>
  <body>
    <h2>div 예제</h2>
    <div>이것은 div입니다.</div>
    <div>또 다른 div입니다.</div>
  </body>
</html>



2. <span>
HTML에서 텍스트나 인라인 요소를 감싸서 특정 부분에 스타일을 적용하거나 구분할 때 사용하는 인라인 요소이다.
의미는 없으나 CSS를 통해서 범위를 감싸주어 특정 부분만 스타일을 적용시키기 좋다. (문단이 아닌 문장태그라서!)
Ex. span.class명 -> span태그에 감싸져있는 class명인 클래스만 !

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>span</title>
    <style>
      span.highlight {
        color: red;
        font-weight: gold;
        background-color: yellow;
        padding: 2px 4px;
      }
    </style>
  </head>
  <body>
    <h2>span 예제</h2>
    <p>
      이 문장에서 <span class="highlight">강조된 부분</span>만 스타일이
      다릅니다.
    </p>
    <p class="highlight">이 문장도 highlight 클래스 스타일이 적용됩니다.</p>
  </body>
</html>


-div를 이용한 레이아웃
1. float 
- CSS에서 요소를 문서의 흐름에서 분리하여 왼쪽 또는 오른쪽으로 띄우는 속성이다. 
    만약 그림과 글이 같이 쓰였다면 그림 크기만큼 끌어올린다. = 수평정렬
- 하지만 float된 요소는 부모의 높이 계산에서 제외되기 때문에, 이를 해결하려면 clear 속성이나 clearfix 테크닉을 함께 사용해야 한다.
- 마지막으로 끌어올린 요소 뒤에 clear 속성을 붙이면 그 아래에 있는 요소들은 올라오지않는다. clear = float하는 요소범위를 한정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>float</title>
    <style>
      img {
        float: left;
        margin-right: 20px;
      }
      span {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <img src="./spring.png" alt="꽃" />
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur itaque
      ipsa, cupiditate aperiam non, eum alias sequi officia et qui sint
      perspiciatis iure. Error nobis inventore illo at aspernatur reiciendis!
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi ipsam
      consequuntur sunt nemo corporis animi vitae aliquam reiciendis harum
      cumque, aliquid ea! Quae reprehenderit quis iste voluptates soluta, dolor
      accusamus.</span
    >
  </body>
</html>

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>float</title>
    <style>
      #box1 {
        background-color: gold;
        float: left;
        margin-right: 20px;
      }
      #box2 {
        background-color: deeppink;
        float: left;
        margin-right: 20px;
      }
      #box3 {
        background-color: greenyellow;
        float: left;
        margin-right: 20px;
      }
      #box4 {
        background-color: deepskyblue;
        float: right;
      }
      hr {
        clear: both;
      }

      p {
        padding: 10px;
        text-align: center;
        font-size: 20px;
      }
      #p1 {
        width: 38%;
        background-color: gold;
        float: left;
        margin-bottom: 20px;
      }
      #p2 {
        width: 53%;
        background-color: deepskyblue;
        float: right;
      }
      #p3 {
        /* clear : both -> 왼쪽&오른쪽 float를 막음 */
        clear: both;
        background-color: deeppink;
      }
    </style>
  </head>
  <body>
    <!-- #box + Enter -> dic 자동생성 -->
    <div id="box1">박스1</div>
    <div id="box2">박스2</div>
    <div id="box3">박스3</div>
    <div id="box4">박스4</div>

    <hr />

    <div id="p1">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae
        quasi enim soluta sit assumenda dicta, accusantium inventore non amet
        nobis ab ducimus quisquam quo, pariatur recusandae ullam expedita, modi
        voluptatem!
      </p>
    </div>
    <div id="p2">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae
        quasi enim soluta sit assumenda dicta, accusantium inventore non amet
        nobis ab ducimus quisquam quo, pariatur recusandae ullam expedita, modi
        voluptatem!
      </p>
    </div>
    <div id="p3">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae
        quasi enim soluta sit assumenda dicta, accusantium inventore non amet
        nobis ab ducimus quisquam quo, pariatur recusandae ullam expedita, modi
        voluptatem!
      </p>
    </div>
  </body>
</html>


2. flex(flexable layout)
- flex는 CSS에서 유연하고 직관적인 레이아웃 구성을 가능하게 해주는 레이아웃이다.
- display : flex -> 부모 요소, 그 안의 자식 요소들을 가로&세로 방향으로 쉽게 정렬 후 배치 가능
- jusftify-content를 사용해 좌우&중앙 방향의 정렬을 설정하고, align-items로 위아래 방향의 정렬을 조절가능 (수평정렬)
- 자식요소에 flex : 1를 주면 공간을 균등히 나누거나 자동크기조절 가능
- 반응형 웹 구성에도 유용!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex layout</title>
    <style>
      .container {
        /* flex의 기본값은 가로정렬 */
        display: flex;
        gap: 10px;
      }
      .item {
        background-color: gold;
        padding: 20px;
        text-align: center;
        /* flex : 1 -> 같은 비율로 채워진다. */
        flex: 1;
        /* border-radius -> 테두리를 둥글게 ~ 픽셀값과 둥근정도는 비례함 */
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">왼쪽</div>
      <div class="item">가운데</div>
      <div class="item">오른쪽</div>
    </div>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex practice</title>
    <link rel="stylesheet" href="./css/layout1.css" />
  </head>
  <body>
    <div class="header">헤더 영역</div>

    <div class="main">
      <div class="sidebar">사이드바</div>
      <div class="content">본문 컨텐츠</div>
    </div>

    <div class="footer">푸터 영역</div>
  </body>
</html>


3. grid
- grid는 CSS에서 2차원(가로+세로) 레이아웃을 쉽게 구성할 수 있도록 도와주는 강력한 레이아웃 시스템
- display : grid를 사용하면 행과 열을 자유롭게 설정할 수 있으며, grid-templete - columns or rows를 통해 영역 구분
- 특히 fr 단위를 사용하면 남은 공간을 비율로 분배할 수 있어 유동적인 레이아웃 구현 가능

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid layout</title>
    <style>
      /*
            fr(fracktion, 분수) : 사용 가능한 공간을 나누어 비율로 할당
            Ex) 1fr 1fr -> 사용 가능한 너비를 2등분하여 동일한 크기 1:1 비율을 가지게 한다.

            If) grid-templete-columns : 1fr 2fr;
            전체 공간을 3등분한 후 첫번쨰 열을 전체의 1/3, 두번째 열은 전체의 2/3
        */
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* row : 행 높이 조절 */
        grid-template-rows: 100px 100px;
        /* 각 태그의 차이 */
        gap: 10px;
      }
      .grid-item {
        background-color: deepskyblue;
        color: white;
        display: flex;
        align-items: center;
        /* justify-content : 상하좌우 요소를 중심으로 가운데 정렬 */
        justify-content: center;
        /* 1rem = 16px(기본값)
            HTML에서 rem의 기본값을 수정할 수 있음(상대적) */
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">1번</div>
      <div class="grid-item">2번</div>
      <div class="grid-item">3번</div>
      <div class="grid-item">4번</div>
    </div>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

day02_CSS_table  (0) 2025.04.03
day02_CSS basic  (0) 2025.04.03
HTML _Image & Hyperlink  (0) 2025.04.01
HTML_List tag  (0) 2025.04.01
HTML_Text tag  (0) 2025.04.01

+ Recent posts

티스토리툴바