8. 실습 1

HTML&CSS

8. 실습 1

sy9723 2022. 10. 7. 04:29

*네이버 부스트코스의 웹 ui개발 공부한 것 정리*

1) 1단 레이아웃 만들기

1단 레이아웃은 레이아웃의 종류 중에 가장 기본이 되는 레이아웃임
레이아웃 제작과정중에 가장 단순하고 쉬움

1단 레이아웃은 위의 이미지와 같이 하나의 행(column)으로 이루어진 레이아웃의 형태를 일컫음
이런 형태의 레이아웃은 웹에서 가장 기본이 되는 레이아웃이며 위의 이미지처럼 상단(header), 중단(contents), 하단(footer)의 구성으로 이루어져 있는 것이 가장 일반적임
1단 레이아웃 형태를 가진 사이트 예시
- https://shopping.naver.com/home

네이버쇼핑

온/오프라인 상품 탐색과 쇼핑정보, 가격비교, 제품리뷰 등을 만나보세요

shopping.naver.com

스타일 정보
- 컨텐츠 최대 가로 길이: 1200
- 사이트 최소 가로 길이: 800
- 컨텐츠 가운데 정렬
주요 태그 및 속성
- HTML
  - div, header, section, footer
- CSS
  - max-width, min-width, margin

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>1단 레이아웃</title> <!--페이지 내용 요약-->
  </head>
  <style>
    .wrap {
        min-width: 800px; /* 최소 가로길이 */
        text-align: center;
    }
    .header {
        height: 100px;
        background-color: lightgray;
    }
    .content {
        max-width: 1200px; /* 최대 가로길이 */
        margin: 0 auto; /* 가운데 정렬 */
        height: 300px;
        background-color: lightsalmon;
    }
    .footer {
        height: 100px;
        background-color: lightblue;
    }
  </style>
  <body>
    <div class="wrap"> <!-- 도화지를 만들어준다고 생각 -->
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
  </body>
</html>

2) 1단 메뉴 만들기

메뉴 UI는 웹 사이트에서 주요 섹션으로 바로 이동할 수 있도록 하는 네비게이션 역할을 하므로 많이 사용되는 UI
그 중 간단한 형태는 1단 메뉴임
메뉴 제작 시에는 메뉴 간 영역을 균등하게 하는 방법과 전 체 메뉴의 최소/ 최대 값을 갖는 방법에 유의해야 함

주요 기능
- 5개의 항목을 갖는 가로 메뉴
- 메뉴의 간격은 모두 동일
- 선택 메뉴는 볼드 처리
- 메뉴 활성화 시 배경색과 폰트 컬러 변경

스타일 정보
- 메뉴 - 전체 너비(min/max): 500px, 700px
- 메뉴 - 높이: 36px
- 메뉴 - 폰트: 12px/#333, 외곽선: 1px/#ddd
- 메뉴(활성화 시) - 배경색: gray, 폰트: 12px/bold/#fff, 외곽선: 1px/#555

주요 태그 및 속성
- HTML
  - div, ul, li, a
- CSS
  - display, position, bolder, margin, background
  - table-layout, :hover

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>1단 메뉴</title> <!--페이지 내용 요약-->
    <style>
      /* 기본 설정 */  
      body {
        font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
      }
      body, ul, ol, li, div, a {
        margin: 0;
        padding: 0;
      }
      ul, ol {
        list-style: none;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      /* 스타일 추가 */
      .wrap {
        max-width: 700px;
        min-width: 500px;
        margin: 5px;
      }
      .menu {
        display: table; /* 요소가 table의 성질을 갖게 한다는 의미 */
        table-layout: fixed; /* 메뉴의 간격을 동일하게 하는 속성*/
        width: 100%;
      }
      .menu_item {
        display: table-cell;
      }
      .menu_link {
        display: block; /* table-cell이 갖고있는 최대 넓이에 맞추기*/
        height: 36px;
        border: 1px solid #ddd;
        font-size: 12px;
        line-height: 36px;
        color: #333;
        text-align: center;
    }
    /* 메뉴 사이사이에 있는 border 두께 줄여주기 */
    .menu_item + .menu_item .menu_link {
        margin-left: -1px; /* border 겹침 현상 없애기 위함 */
    }
    /* .menu_link가 아닌 .menu_item에 :hover 부여*/
    /* 코드의 관리가 용이하도록 */
    .menu_item:hover .menu_link {
        color: green;
        font-weight: bold;
    }
    .menu_item.active .menu_link {
        position: relative; /* 47번째 줄 margin-left: -1px; 때문에 */
        border-color: #555;
        font-weight: bold;
        color: #fff;
        background-color: gray;
    }
    </style>
  </head>
  <body>
    <div class="wrap">
        <ul class="menu">
            <li class="menu_item"><a href="#" class="menu_link">메일</a></li>
            <li class="menu_item active"><a href="#" class="menu_link">카페</a></li>
            <li class="menu_item"><a href="#" class="menu_link">소프트웨어</a></li>
            <li class="menu_item"><a href="#" class="menu_link">지식백과</a></li>
            <li class="menu_item"><a href="#" class="menu_link">영화</a></li>
        </ul>
    </div>
  </body>
</html>

3) CSS 리셋

크로스 브라우징(Cross Browsing)이란?
- 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않는 것
- 브라우저마다 태그를 렌더링하는 기본 스타일이 다르기 때문에 필요함
모든 브라우저에서 동일한 뷰를 보여주기 위해 기본값을 초기화해야 함
리셋 CSS는 정해진 형식이나 코드가 없음
사용하지도 않는 태그들을 초기화 할 필요는 없으며 프로젝트 성격에 맞추어 작성해주면 됨

https://cssdeck.com/blog/

CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials

All the most common CSS Reset scripts in one place to copy/paste, with complete documentation, guides and tutorials.

cssdeck.com

실습 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS 리셋</title> 
    <style>
        body,
        h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ul, ol, dl, dd {
            margin: 0;
            padding: 0;
        }
        ul, ol {
            list-style: none;
        }

        table {
            border-collapse: collapse;
        }

        p {
            margin: 0;
            padding: 0;
        }
        
        em {
            font-style: normal
        }
        
        a {
            color: inherit;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        img {
            vertical-align: top;
        }

        fieldset, legend {
            margin: 0;
            padding: 0;
        }
        
        body, input, textarea, select, button {
            font-size: 14px;
            font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
        }
        
        fieldset {
            border: 0;
        }
    </style>
  </head>
  <body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <ul>
        <li>ul 리스트의 li</li>
        <li>ul 리스트의 li
            <ul>
                <li>ul 리스트의 li</li>
                <li>ul 리스트의 li</li>
            </ul>
        </li>
        <li>ul 리스트의 li</li>
    </ul>
    <ol>
        <li>ol 리스트의 li</li>
        <li>ol 리스트의 li</li>
        <li>ol 리스트의 li</li>
    </ol>
    <dl>
        <dt>dl 리스트의 dt</dt>
        <dd>dl 리스트의 dd</dd>
        <dd>dl 리스트의 dd</dd>
    </dl>
    <table>
        <caption>caption</caption>
        <thead>
        <tr>
            <th>th</th>
            <th>th</th>
            <th>th</th>
            <th>th</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>th</th>
            <th>th</th>
            <td>td</td>
            <td>td</td>
        </tr>
        <tr>
            <th>th</th>
            <th>th</th>
            <td>td</td>
            <td>td</td>
        </tr>
        </tbody>
    </table>
    <p>모든 브라우저에서 <em>동일한</em> 화면을 볼 수 있도록 기본값을 <strong>초기화</strong>합니다.</p>
    <a href="#">자세히 보기</a>
    <div>
	    <img src="./images/pizza.png" alt="pizza">
    </div>
    <form>
        <fieldset>
            <legend>form요소</legend>
    
            <input type="text" title="검색어 입력" value="input text">
    
            <button type="submit">button</button>
    
            <textarea>textarea</textarea>
    
            <label for="checkbox">input checkbox</label><input type="checkbox" id="checkbox">
    
            <select>
                <option>select 옵션</option>
                <option>select 옵션</option>
                <option>select 옵션</option>
            </select>
        </fieldset>
    </form>
  </body>
</html>

코드 설명
- body, hq, h2, h3, h4, h5, h6
  - 여백만 제거, font-size와 font-weight도 기본 값을 가지고 있으므로 프로젝트에 따라서 초기화해도 됨
- ul, ol, dl
  - 여백을 제거하고 브라우저에 기본 값으로 list-style-type 속성이 적용되어 있으므로 ul과 ol에 none을 적용시켜주면 부모의 값을 상속받으므로 모든 list 관련 요소에 none이 적용됨
- table
  - 테이블에 임의로 border 속성 값을 넣어서 확인해보면 border-collapse가 seperate로 되어있음.
  - 허나 셀 사이가 떨어져있는 상태가 일반적이지 않기 때문에 collapse로 변경하였음
- p, em, strong, a, img
  - <p>는 단순 여백 제거
  - <em>을 font-style이 italic인 초기값을 가지고 있으므로 이를 없애줌
  - <a>는 다양하게 스타일 초기화가 가능하지만 text-decoration를 없애주고 색상을 상속받을 수 있도록 변경함
  - <img> 하단에는 padding이나 margin이 아닌, 인라인 요소이기 때문에 생긴 여백이 있음. vertical-align 속성 값을 top으로 변경하면 이 여백이 사라짐
- form
  - 폼 요소는 브라우저 기본 스타일이 가장 많이 적용되어 있는 요소임
  - 그렇기 때문에 모두 동일하게 보이도록 커스텀하는 일은 매우 까다로운 작업이며, 디자인 요소로 처리하거나 기본 스타일대로 노출하는 경우도 종종 있음

4) 표 (table)

테이블이란?
- html에서 테이블 태그는 표를 만들 때 사용함.
- 표는 어떤 내용을 일정한 형식과 순서에 따라서 보기 쉽게 나타낸 것으로, 셀 안에 제목과 그에 해당하는 내용들을 입력하기 때문에 다른 태그들 보다 사용하는 방법이 좀 더 복잡합
테이블과 레이아웃
- 레이아웃을 구성하기 위해서 테이블 태그를 사용하는 일이 없도록 해야 함
- 만약 표로 만들어진 UI더라도, 리스트 태그와 같이 다른 태그로 대체할 수 있다면 그렇게 하는 것이 좋음

표의 접근성
- img 태그에 alt 속성을 추가하는 이유는 접근성 때문
- 테이블 태그 역시 제목 셀인 th와 내용 셀인 td를 스크린리더가 올바르게 읽을 수 있도록 속성을 추가해주어야 함
- 모든 제목 셀(th)에는 scope 속성을 추가해서 어떤 내용 셀(td)에 대한 것인지를 알려주어야 함
- scope 값으로는 col, row, colgroup, rowgroup을 사용할 수 있는데, 같은 열의 제목에는 col, 같은 행의 제목에는 row 값을 추가해 주면 됨, colgroup과 rowgroup은 보통 병합된 제목 셀에 주로 사용됨
- 정말 복잡한 표의 경우에는 id와 headers 속성을 추가하기도 하는데, 모든 th에 id를 추가하고 내용이라고 생각되는 셀에는 headers를 추가하여 그 값으로 id 값들을 나열해 주면 됨
- 실습 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>표의 접근성</title> <!--페이지 내용 요약-->
    <style>
        table {
            border-collapse: collapse;
            border:1px solid #333;
        }
        col, tr, td, th {
            border:1px solid #333;
        }
    </style>
  </head>
  <body>
    <table>
        <col>
        <colgroup span="2"></colgroup>
        <colgroup span="2"></colgroup>
        <tr>
          <td rowspan="2"></td>
          <th colspan="2" scope="colgroup">Mars</th>
          <th colspan="2" scope="colgroup">Venus</th>
        </tr>
        <tr>
          <th scope="col">Produced</th>
          <th scope="col">Sold</th>
          <th scope="col">Produced</th>
          <th scope="col">Sold</th>
        </tr>
        <tr>
          <th scope="row">Teddy Bears</th>
          <td>50,000</td>
          <td>30,000</td>
          <td>100,000</td>
          <td>80,000</td>
        </tr>
        <tr>
          <th scope="row">Board Games</th>
          <td>10,000</td>
          <td>5,000</td>
          <td>12,000</td>
          <td>9,000</td>
        </tr>
    </table>
    <table>
        <caption>
            Availability of holiday accommodation
        </caption>
        <thead>
            <tr>
                <td></td>
                <th id="stud" scope="col">Studio</th>
                <th id="apt" scope="col">Apt</th>
                <th id="chal" scope="col">Chalet</th>
                <th id="villa" scope="col">Villa</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th id="par" colspan="5" scope="colgroup">Paris</th>
            </tr>
            <tr>
                <th headers="par" id="pbed1">1 bedroom</th>
                <td headers="par pbed1 stud">11</td>
                <td headers="par pbed1 apt">20</td>
                <td headers="par pbed1 chal">25</td>
                <td headers="par pbed1 villa">23</td>
            </tr>
        </tbody>
    </table>
  </body>
</html>

표와 position 속성
- table, tr, td 각 요소에 position: relative;를 각각 적용할 경우, 셀 안의 position: absolute;인 요소가 예상대로 위치하는지 확인해보자

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>표와 position 속성</title> 
    <style>
        table {
            border: 1px solid #000;
            table-layout: fixed;
            width: 100%;
            height: 150px;
            border-collapse: collapse;
          }
          .td_relative {
            border-color: red;
          }
          .tr_relative {
            border-color: blue;
          }
          .table_relative {
            border-color: green;
          }
          
          .wrap {
            margin: 50px;
          }
          .relative_section {
            position: relative;
          }
          .absolute_section {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0;
            top: 0;
            background-color: #000;
          }
          .td_relative .absolute_section {
            background-color: red;
          }
          .tr_relative .absolute_section {
            background-color: blue;
          }
          .table_relative .absolute_section {
            background-color: green;
          }
          .div_relative .relative_section {
            width: 100%;
            height: 100%;
          }
    </style>
  </head>
  <body>
    <div class="wrap">
        <table class="td_relative">
          <caption>td에 relative</caption>
          <tr>
            <td class="relative_section">
              <div class="absolute_section"></div>
            </td>
          </tr>
        </table>
      </div>
      
      <div class="wrap">
        <table class="tr_relative">
          <caption>tr에 relative</caption>
          <tr class="relative_section">
            <td>
              <div class="absolute_section"></div>
            </td>
          </tr>
        </table>
      </div>
      
      <div class="wrap">
        <table class="table_relative relative_section">
        <caption>table에 relative</caption>
          <tr>
            <td>
              <div class="absolute_section"></div>
            </td>
          </tr>
        </table>
      </div>
      
      <div class="wrap div_relative">
        <table>
        <caption>div에 relative</caption>
          <tr>
            <td>
              <div class="relative_section">
                <div class="absolute_section"></div>
              </div>
            </td>
          </tr>
        </table>
  </body>
</html>

결과

브라우저마다 position: relative;가 적용되는 방식이 다름을 확인할 수 있음
td에 적용시, 가장 정상적으로 노출되고 있지만, 요소의 복잡도에 따라 예상치 못한 버그가 발생할 수 있음
td 안에 div를 추가하여 적용시, 일부 브라우저에서 박스가 중앙에 노출되고 있지만, 높이 값과 콘텐츠가 있다며 정상 노출되며 가장 안전한 방법으로 볼 수 있음
따라서 테이블은 각 요소를 배치하는 틀로 보고, 셀 안에 div를 추가하여 position 요소나 꾸미는 요소는 내부 div에 직접 선언하는 것에 좋음

표의 Border 속성
- 테이블 태그가 마크업하기 까다로운 이유 중 하나는 border가 적용되는 방식 때문
- 기본 스타일인 border-collapse: seperate; 값을 주로 collapse;로 변경하여 스타일을 입히는데 이때 어떤 선이 없어지는지 알 필요가 있음
- border-collapse: seperate; (기본 값)
- border-collapse: collapse: (border 병합)
- 테이블 레이어
  - table < col < tbody < thead < tr < td < th 순서대로 z-index가 높음

5) 통계표 제작

주요 기능
- 연령별, 성별, 조회수, 비율에 대한 데이터 통계 표
스타일 정보
- 표 너비: 500px
- 각 셀 높이: 40px
- 연령별 성별의 너비: 90px
- 조회수, 비율 텍스트 정렬: 오른쪽
주요 태그 및 속성
- HTML
  - table, caption, colgroup, col, thead, tbody, th, td
  - (속성: scope, rowspan, colspan)
- CSS
  - table-layout, border-collapse
  - padding, border, color, text-align, background-color
코드 실습

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>통계표 제작</title> 
    <style>
        table, td, th {
            border-collapse: collapse;
        }
        
        table {
            width: 500px;
            table-layout: fixed;
            font-size: 13px;
        }
        
        .col {
            width: 90px;
        }
        
        th {
            font-weight: normal;
        }
        
        th, td {
            border-bottom: 1px solid #e1e1e1;
        }
        
        thead th {
            padding: 5px 0;
            border-bottom: 2px solid #000;
        }
        
        tbody td {
            height: 40px;
        }
        
        .th_view,
        .th_rate,
        tbody td {
            text-align: right;
        }
        
        .th_male,
        .th_female {
            background: #f8f8f8;
        }
    </style>
  </head>
  <body>
    <table>
        <caption>성별, 연령별 분포 목록</caption>
        <colgroup>
            <col span="2" class="col">
            <col span="2">
        </colgroup>
        <thead>
        <tr>
            <th scope="col">연령별</th>
            <th scope="col">성별</th>
            <th scope="col" class="th_view">조회수</th>
            <th scope="col" class="th_rate">비율</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">전체</th>
            <th scope="row" class="th_male">남</th>
            <td>0</td>
            <td>0.0%</td>
        </tr>
        <tr>
            <th scope="row" class="th_female">여</th>
            <td>0</td>
            <td>0.0%</td>
        </tr>
        <tr>
            <th rowspan="2" scope="rowgroup">0-12</th>
            <th scope="row" class="th_male">남</th>
            <td>0</td>
            <td>0.0%</td>
        </tr>
        <tr>
            <th scope="row" class="th_female">여</th>
            <td>0</td>
            <td>0.0%</td>
        </tr>
        </tbody>
    </table>
  </body>
</html>

코드 설명
- <colgroup>, <col>
  - 해당 태그는 하나의 열에 동일한 속성을 적용시킬 때 사용함
  - 보통 width, background, border를 적용시킬 때 사용하는데 렌더링 시 레이어 뎁스가 낮은 편이기 때문에, 주로 width를 제어하기 위해 사용함
  - 여러 열에 동일한 스타일을 적용해야 할 경우에는 col에 span 속성을 사용하여 병합 가능
- table-layout: fixed;
  - table에 전체 표의 크기를 지정했을 경우, 각 셀의 너비는 내용과 비례하여 자동 균등 분할 됨
  - 성능상의 이슈로 반드시 추가해 주는 것이 좋음
- th, td에서의 콘텐츠 정렬
  - th에서 text-align: center;
  - td에서 text-align: left;
  - th, td에서 모두 vertical-align: middle;

6) 폼 커스텀1 - 텍스트 박스

텍스트 박스가 커스텀된 사이트에는 네이버 로그인 화면이 있음. 이와 비슷하게 커스텀을 해볼 예정

주요 기능
- 텍스트 박스의 스타일링
- placeholder (기본 문구) 스타일링
스타일 정보
- 회색(#ddd) 선을 갖는 박스 형태
주요 태그 및 속성
- HTML
  - input, textarea
- CSS
  - ::placeholder, 비표준 프리픽스(prefix)

코드 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>폼 커스텀1-텍스트 박스</title> <!--페이지 내용 요약-->
    <style>
      .text_form {
        width: 198px;
        margin-top: 20px;
        padding: 8px;
        border: 1px solid #ddd;
      }
      .text_form input { /* input 창 스타일링 */
        height: 20px;
        line-height: 20px;
        padding: 0;
        border: 0 none;
        font-size: 15px;
      }
      .textarea {
        width: 300px;
        height: 150px;
        margin-top: 20px;
        padding: 8px;
        border: 1px solid #ddd;
      }
      .textarea textarea { /* textarea 창 스타일링 */
        width: 100%;
        height: 100%;
        border: 0 none;
        padding: 0;
        font-size: 15px;
        resize: none; /* 창 크기 변화 없게 */
      }
      /* 모든 브라우저에서 적용되도록 */
      .text_form input[type=text]::placeholder { /* placeholder 색상 변경 */
        color: red;
      }
      .text_form input[type=text]:-ms-placeholder { /* Internet Explorer 10-11 */
        color: red;
      }
      .text_form input[type=text]::-webkit-input-placeholder { /* Edge */
        color: red;
      }
      .text_form input[type=password]::placeholder { /* placeholder 색상 변경 */
        color: blue;
      }
      .text_form input[type=password]:-ms-placeholder { /* Internet Explorer 10-11 */
        color: blue;
      }
      .text_form input[type=password]::-webkit-input-placeholder { /* Edge */
        color: blue;
      }
      .textarea textarea::placeholder {
        color: green;
      }
      .textarea textarea:-ms-placeholder {
        color: green;
      }
      .textarea textarea::-webkit-input-placeholder {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="text_form">
        <input type="text" name="" value="" placeholder="이름을 입력해주세요.">
    </div>
    <div class="text_form">
        <input type="password" name="" value="" placeholder="비밀번호를 입력해주세요.">
    </div>
    <div class="textarea">
        <textarea name="name" cols="80" rows="8" placeholder="문구를 입력해주세요."></textarea>
    </div>
  </body>
</html>

비표준 코드인 placeholder에 유의해야 함

https://www.w3schools.com/cssref/sel_placeholder.asp

CSS ::placeholder Selector

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

7) 폼 커스텀2 - 체크박스, 라디오

체크박스와 라디오타입의 버튼의 디자인은 css로 세부적인 컨트롤이 거의 불가능함
따라서 기능을 남겨두고 이미지로 대체하는 방법을 많이 사용함
input의 id 속성과 label의 for 속성이 매칭되었을 때 기능이 동작하는 방식에 유의할 것

주요 기능
- checkbox, radio 버튼의 스타일링
- 각 버튼의 본래 기능 (true/false)
스타일 정보
- 활성/비활성을 디자인된 버튼으로 교체하여 커스텀
주요 태그 및 속성
- HTML
  - input:checkbox, input:radio
- CSS
  - :before, + selector

코드 실습

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>폼 커스텀2-체크박스, 라디오</title> <!--페이지 내용 요약-->
    <style>
      body {
        padding: 50px;
      }
      h1 {
        margin: 50px 0 20px;
        font-size: 20px;
        font-weight: bold;
      }
      .check_form {
        margin-top: 20px;
      }
      .check_form label {
        position: relative;
        display: inline-block;
        overflow: hidden; /* 요소 내의 컨텐츠 크기가 더 크면 넘치는 부분을 잘라서 보여주지 않도록*/
        width: 36px;
        height: 21px;
        border-radius: 10px; /* 테두리를 둥글게 만들어주는 속성 */
        background-color: #666;
        color: transparent; /* 투명색 */
      }
      .check_form label:before {
        position: absolute;
        left: 1px;
        top: 1px;
        content: '';
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background-color: #fff;
      }
      /* 체크박스가 체크되었을 때 변하도록 */
      .check_form input:checked + label {
        background-color: blue;
      }
      .check_form input:checked + label:before {
        left: auto;
        right: 1px;
      }
      /* 체크 박스의 input이 보이지 않도록 */
      .check_form input {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        opacity: 0; /* 불투명도: 0 -> 투명하다는 뜻 */
      }



      /* 체크 박스를 이미지로 스타일링 */
      .check_form2 {
        margin-top: 20px;
      }
      .check_form2 label:before {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(./radio/radio.png) no-repeat 0 0;
        background-size: 20px;
        content: '';
        margin: -1px 5px 0 0;
        vertical-align: top;
      }
      .check_form2 input:checked + label:before {
        background-image: url(./radio/radio_on.png);
      }
      /* 체크 박스의 input이 보이지 않도록 */
      .check_form2 input {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        opacity: 0; /* 불투명도: 0 -> 투명하다는 뜻 */
      }



      /* 라디오를 이미지로 스타일링 */
      .radio_form {
        margin-top: 20px;
      }
      .radio_form label:before {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(./radio/radio.png) no-repeat 0 0;
        background-size: 20px;
        content: '';
      }
      .radio_form input:checked + label:before {
        background-image: url(./radio/radio_on.png);
      }
      /* 라디오의 input이 보이지 않도록 */
      .radio_form input {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        opacity: 0; /* 불투명도: 0 -> 투명하다는 뜻 */
      }
    </style>
  </head>
  <body>
    <h1>체크 박스</h1>
    <div class="check_form">
        <input type="checkbox" id="check1" name="" value="">
        <label for="check1">선택1</label>
    </div>
    <div class="check_form">
        <input type="checkbox" id="check2" name="" value="">
        <label for="check2">선택2</label>
    </div>
    <h1>체크 박스 (img)</h1>
    <div class="check_form2">
        <input type="checkbox" id="checkimg1" name="" value="">
        <label for="checkimg1">선택1</label>
    </div>
    <div class="check_form2">
        <input type="checkbox" id="checkimg2" name="" value="">
        <label for="checkimg2">선택2</label>
    </div>
    <h1>라디오</h1>
    <div class="radio_form">
        <input type="radio" id="radio1" name="radio_form" value="">
        <label for="radio1">선택1</label>
    </div>
    <div class="radio_form">
        <input type="radio" id="radio2" name="radio_form" value="">
        <label for="radio2">선택2</label>
    </div>
    <div class="radio_form">
        <input type="radio" id="radio3" name="radio_form" value="">
        <label for="radio3">선택3</label>
    </div>
  </body>
</html>

8) 폼 커스텀3 - SELECT 메뉴

주요 기능
- select의 기본 화살표 변경
스타일 정보
- select의 기본 화살표를 준비된 이미지로 변경
주요 태그 및 속성
- HTML
  - select
- CSS
  - appearance

코드 실습

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>폼 커스텀3-select 메뉴</title> <!--페이지 내용 요약-->
    <style>
      body {
        padding: 50px;
      }
      h1 {
        margin: 50px 0 20px;
        font-size: 20px;
        font-weight: bold;
      }
      .select_form {
        position: relative;
        width: 198px;
        height: 38px;
        line-height: 38px;
        border: 1px solid #ddd;
      }
      .select_form select {
        width: 100%;
        height: 90%;
        border: 0 none;
        font-size: 16px;
        padding: 0 0 0 10px;
        appearance: none; /* 기본 버튼 형태 없애기 */
      }
      .select_form:after {
        position: absolute;
        top: 16px;
        right: 10px;
        display: block;
        background: url(./images/select.png) no-repeat 0 0;
        width: 13px;
        height: 7px;
        content:'';
      }
    </style>
  </head>
  <body>
    <h1>셀릭트 커스텀</h1>
    <div class="select_form">
        <select name="" id="">
            <option value="">선택1</option>
            <option value="">선택2</option>
            <option value="">선택3</option>
        </select>
    </div>
  </body>
</html>

9) 리스트 요소1 - 사전 검색 결과

참고 사이트

https://terms.naver.com/entry.naver?docId=1605631&cid=50333&categoryId=50333

프로젝트

프로젝트영양학사전 연구나 새로운 사업의 개발을 위한 유기적이고 조직적인 계획. 원자력개발이나 우주개발 등은 대형 프로젝트를 조직하여 이루어진다. 일반적으로는 특정한 목표, 계획을

terms.naver.com

10) 리스트 요소2 - 실시간 검색어

참고 사이트

https://entertain.naver.com/home

네이버 TV연예

지금 가장 핫한 연예 이야기

entertain.naver.com

11) 리스트 요소3 - 쿠키 이용안내

참고 사이트1
- HTML 태그 관련

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics

HTML elements reference - HTML: HyperText Markup Language | MDN

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

참고 사이트2
- 리스트 관련 CSS

https://www.w3schools.com/css/css_list.asp

CSS Styling Lists

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

12) 리스트 요소4 - 뉴스

참고 사이트

https://www.naver.com/

네이버

네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요

www.naver.com

13) 이미지 목록 제작

이미지 리스트
- 이미지 리스트는 웹사이트에서 가장 친숙한 리스트 UI 요소 중 하나
- 이미지 리스트는 이미지와 함께 압축된 정보를 제공하여 콘텐츠를 미리 보여주는 역할을 함
- 다른 말로 섬네일 리스트라고도 불림

제작 화면

주요 기능
- 메인, 서브 리스트로 구성된 2단 이미지 리스트
- 메인, 서브 리스트는 가로 중앙 정렬 처리
- 메인 리스트는 이미지 위 레이어 형태의 말줄임 텍스트 노출
- 서브 리스트는 이미지 하단에 말줄임 텍스트 노출
스타일 정보
- 메인/서브 리스트-전체 가로 너비: 1000px
- 메인 리스트 - 메인 이미지: 322x215, 배경색: #ececec, 외곽선: 1px/solid/#000(투명도 5%)
- 메인 리스트 - 카테고리 폰트: 14px/#fff, 제목 폰트: 18px/#fff
- 서브 리스트 - 서브 이미지: 188x141, 외곽선: 1px/solid/#000(투명도 3%)
- 서브 리스트 - 카테고리 폰트: 12px/#7ba7df, 제목 폰트: 15px/#090909
주요 태그 및 속성
- HTML
  - div, img, a, ol
- CSS
  - float, position, ellipsis, :after, :nth-child

핵심 코드 미리보기1 - 이미지 리스트 정렬

See the Pen Untitled by kim seoyoung (@seoooo) on CodePen.

코드 설명
- HTML
  - 3단 이미지로 구성된 main_list, 5단 이미지로 구성된 ol.sub_list가 있음
  - 참고로 ol 태그는 순서가 있는 리스트를 만들 때 사용하는 태그
  - main_list의 경우에는 wrap으로 한 번 더 감쌌는데 이유는 배경색이 있기 때문
- CSS
  - 우선적으로, 태그가 기본적으로 가지고 있는 기본 스타일을 제거하기 위해 html, body, ol 태그에 margin, padding의 값을 초기화 하였음
  - 메인 이미지 리스트를 감싸고 있는 main_wrap 클래스에 배경색을 지정
  - 이미지 리스트는 총 300px의 width 값을 가지고 있음
  - 고정 너비를 가지고 있는 블록 요소를 중앙 정렬 시키기 위해 margin: 0 auto;를 선언 (이미지 리스트)
  - li에는 float: left를 적용하여 블록 요소를 좌측으로 이어 붙게 적용하였음
  - 다만, float를 선언할 경우 부모 요소가 자식의 높이 값을 알지 못하기 때문에 반드시 해제를 해줘야 함
  - 해제하기 위한 방법에는 다양한 방법이 있는데 :after를 선언하여 clear 해줄 수 있음
  - 이미지 리스트는 이미지 사이에 간격을 가지고 있는데, 첫 번째 이미지를 제외한 나머지 이미지만 좌측 여백을 가지고 있으므로 인접 형제 선택자를 사용하여 간격을 주었음
  - 서브 리스트에서 5n 번째 리스트에는 margin-right을 없애기 위해 :nth-child(5n)을 사용하였음

핵심 코드 미리보기2 - 텍스트 말줄임

See the Pen HTML - 02 by kimseonghoon (@hoonJJang) on CodePen.

코드 설명
- HTML
  - p 태그로 구성된 텍스트 3개
- CSS
  - 말줄임을 하기 위해서는 고정 너비를 가져야 하기 때문에 width를 200px로 선언함
  - 눈에 잘 보이게 하기 위해 font-size, line-height, background-color 속성을 추가함
  - white-space: nowrap;은 글자수가 해당 너비를 넘어서게 되면 자동으로 줄바꿈이 되는데, nowrap을 설정할 경우 자동 줄바꿈을 방지할 수 있음
  - overflow: hidden;을 선언하면 넘치는 부분을 감출 수 있음. 선언되지 않을 경우 요소의 너비를 벗어나게 되는데 이를 방지함
  - 말줄임에서 가장 중요한 부분은 text-overflow:ellipsis;로 컨텐츠가 해당 영역을 벗어날 경우 '···' 처리를 해줌
  - 여러줄 말줄임의 경우에는 조금 다름
  - 먼저 자동 줄바꿈을 방지하는 white-space: nowrap;은 사용하지 않음. 값을 선언하지 않은 경우 기본 normal 값이 적용됨
  - overflow: hidden;과 text-overflow:ellipsis;는 그대로 사용함
  - 다음은 webkit 계열 브라우저(크롬, 오페라, 사파리)의 여러줄 말줄임 적용을 위한 선언 부분임
    - display: -webkit-box : 플렉스 박스 형태로 변환
    - -webkit-box-orient: 플렉스 박스의 방향 설정
    - -webkit-line-clamp: 보여줄 줄의 개수
  - 여러줄 말줄임의 경우 위 3가지 속성을 필수적으로 선언함
  - 여러줄 말줄임에서 주의할 점은 webkit 외 브라우저 같은 크로스브라우징을 위한 처리를 위해 line-height와 height을 반드시 선언해주어야 함
  - height 값은 webkit-line-clamp * line-height를 해주면 됨
  - 만약 이 값을 선언하지 않을 경우 ie에서는 말줄임 없이 모든 텍스트가 노출되어 버리니 주의해야 함

핵심 코드 미리보기3 - 이미지 액자 효과

See the Pen HTML - 03 by kimseonghoon (@hoonJJang) on CodePen.

코드 설명
- HTML
  - 이미지 url을 가지고 있는 img 태그가 있고 그것을 감싸는 img_wrap이 있음
- CSS
  - img는 200x134 사이즈이므로 img_wrap에 동일한 width와 height을 선언하였음
  - 이미지 위로 반투명 외곽선과 dimmed(반투명 음영 영역)된 배경을 적용하기 위해 구조를 추가해야 함
  - 보더를 가지는 html 태그를 추가해서 만들 수도 있으나 시멘틱 마크업을 위해 불필요한 구조는 추가하지 않고 before, after 같은 가상 선택자를 사용하여 구조를 추가하는 것이 더 좋음
  - img 위로 보더가 나와야 하므로 absolute를 사용하여 이미지 위로 보더를 띄움
  - absolute 사용 시 부모 안 img_wrap의 너비, 높이 값과 동일하게 맞추기 위해 top, right, bottom, left 값을 0으로 선언하였음. 또한 반투명 컬러값 적용을 위해 rgba를 사용함
  - rgba의 마지막 숫자는 투명도 값으로 값 1은 100%(불투명)인 불투명을 뜻하므로 30% 투명도를 적용하기 위해 0.3을 입력하였음

메인 이미지 리스트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>메인 이미지 리스트</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/메인 리스트 제작.css">
</head>
<body>
    <div class="wrap">
        <h1>TOP100</h1>
        <div class="main_wrap">
            <div class="content">
                <p class="noti_txt">8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요)</p>
                <ol class="main_list">
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box"> <!--이미지 외곽선 줄 태그-->
                                <img src="images/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info"> <!-- css 완성 후 나중에 -->
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box"> <!--이미지 외곽선 줄 태그-->
                                <img src="images/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box"> <!--이미지 외곽선 줄 태그-->
                                <img src="images/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                </ol>
            </div>

        </div>

    </div>   
</body>
</html>

@charset "UTF-8"; /* 유니코드 문자열(비 아스키코드)이 있을 때 utf-8로 명시적으로 선언해주어 utf-8 인코딩 셋을 지정 */

/* 기본 스타일 선언 */
body {
    font-family: Dotum,'돋움', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: #3c3c3c;
}
a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}
img {
    vertical-align: top;
}

/* 스타일 선언 */
h1 {
    width: 1000px; /* 컨텐츠가 가지는 넓이와 동일하게 */
    margin: 0 auto;
    padding: 20px 0;
    font-size: 26px;
    line-height: 38px;
    color: #000;
}
.main_wrap {
    background-color: #ececec;
}
.main_wrap .content {
    position: relative; /* 이걸 선언 안해주면 밑에 .noti_txt 부분이 회색 배경 바깥으로 벗어남 */
    width: 1000px;
    margin: 0 auto;
    padding: 50px 0 20px;
}
.main_wrap .noti_txt {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 12px;
    color: #7c7c7c;
}
.main_list li {
    float: left; /* 세로로 붙어있던 이미지들이 가로로 붙음 */
    /* 여기까지만 하면 회색 배경이 이미지를 감싸지 못함*/
}
.main_list::after { /* float 해제 하는 부분 */
    display: block;
    content: '';
    clear: both;
}
.main_list li + li { /* 이미지 사이 간격 */
    margin-left: 17px;
}
.main_list .img_box img {
    width: 322px;
    height: 215px;
}
.main_list .item_link { /* 앵커는 인라인 요소이기 때문에 이 설정을 선언하지 않으면 영역을 제대로 인식하지 못하는 상황이 발생하기도 함*/
    display: block; /* 앵커는 블록인 자식요소를 가지고 있다면 항상 이 부분을 선언해주어야 함 */
}
/* 액자 만들기 */
.main_list .img_box {
    position: relative;
}
.main_list .img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}



/* info 이후 */
.main_list .info {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: #fff;
    overflow: hidden;
}
.main_list .item_link {
    position: relative;
}
.main_list .category {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 18px; /* font-size 보다 2-4px 정도 더 크게 */
}
.main_list .title {
    font-size: 18px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

서브 이미지 리스트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>서브 이미지 리스트</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/서브 리스트 제작.css">
</head>
<body>
    <div class="wrap">
        <h1>TOP100</h1>
        <div class="main_wrap">
            <div class="content">
                <p class="noti_txt">8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요)</p>
                <ol class="main_list">
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box"> <!--이미지 외곽선 줄 태그-->
                                <img src="images/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info"> <!-- css 완성 후 나중에 -->
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box"> <!--이미지 외곽선 줄 태그-->
                                <img src="images/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="item_link">
                            <div class="img_box"> <!--이미지 외곽선 줄 태그-->
                                <img src="images/thumb_image_large.jpg" alt="">
                            </div>
                            <div class="info">
                                <span class="category">산악스키</span>
                                <p class="title">오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이</p>
                            </div>
                        </a>
                    </li>
                </ol>
            </div>
        </div>
        <div class="sub_wrap">
            <ol class="sub_list">
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="item_link">
                        <img src="./images/thumb_image.jpg" alt="">
                    </a>
                    <div class="info"> <!-- css 완성 후 나중에 -->
                        <a href="#" class="title">국제육상경기연맹으로부터 라벨을 부여받은 단 두 개의 마라톤 대회 중 실버라벨을 5년 연속 유지하고 있는 대구국제마라톤대회!</a>
                        <a href="#" class="category_link">마라톤</a>
                    </div>
                </li>
            </ol>
        </div>
    </div>   
</body>
</html>

@charset "UTF-8"; /* 유니코드 문자열(비 아스키코드)이 있을 때 utf-8로 명시적으로 선언해주어 utf-8 인코딩 셋을 지정 */

/* 기본 스타일 선언 */
body {
    font-family: Dotum,'돋움', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: #3c3c3c;
}
a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}
img {
    vertical-align: top;
}

/* 스타일 선언 */
h1 {
    width: 1000px; /* 컨텐츠가 가지는 넓이와 동일하게 */
    margin: 0 auto;
    padding: 20px 0;
    font-size: 26px;
    line-height: 38px;
    color: #000;
}
.main_wrap {
    background-color: #ececec;
}
.main_wrap .content {
    position: relative; /* 이걸 선언 안해주면 밑에 .noti_txt 부분이 회색 배경 바깥으로 벗어남 */
    width: 1000px;
    margin: 0 auto;
    padding: 50px 0 20px;
}
.main_wrap .noti_txt {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 12px;
    color: #7c7c7c;
}
.main_list li {
    float: left; /* 세로로 붙어있던 이미지들이 가로로 붙음 */
    /* 여기까지만 하면 회색 배경이 이미지를 감싸지 못함*/
}
.main_list::after { /* float 해제 하는 부분 */
    display: block;
    content: '';
    clear: both;
}
.main_list li + li { /* 이미지 사이 간격 */
    margin-left: 17px;
}
.main_list .img_box img {
    width: 322px;
    height: 215px;
}
.main_list .item_link { /* 앵커는 인라인 요소이기 때문에 이 설정을 선언하지 않으면 영역을 제대로 인식하지 못하는 상황이 발생하기도 함*/
    display: block; /* 앵커는 블록인 자식요소를 가지고 있다면 항상 이 부분을 선언해주어야 함 */
}
/* 액자 만들기 */
.main_list .img_box {
    position: relative;
}
.main_list .img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}



/* info 이후 */
.main_list .info {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: #fff;
    overflow: hidden;
}
.main_list .item_link {
    position: relative;
}
.main_list .category {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 18px; /* font-size 보다 2-4px 정도 더 크게 */
}
.main_list .title {
    font-size: 18px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}



/* 여기서부터 서브 리스트 관련 */
.sub_wrap {
    margin-top: 30px; /* 메인 리스트와 간격을 주기 위함 */
}
.sub_list {
    width: 1000px;
    margin: 0 auto; /* 가운데 정렬 */
}
.sub_list .item_link img {
    width: 188px;
    height: 141px
}
.sub_list li {
    float: left;
    width: 188px; /* 이미지 크기와 동일하게 */
    margin-bottom: 40px; /* 첫 번째 줄과 두 번째 줄 사이 간격 */
}
.sub_list::after { /* float 해제하는 부분 */
    display: block;
    content: '';
    clear: both;
}
.sub_list li + li {
    margin-left: 15px;
}
.sub_list li:nth-child(5n+1) { /* 1, 6번째 li에만 적용됨 */
    margin-left: 0;
}
/* 액자 만들기 */
.sub_list .item_link {
    display: block;
    position: relative;
}
.sub_list .item_link:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border: 1px solid rgba(0, 0, 0, 0.03);
}



/* info 이후 */
.sub_list .info {
    height: 79px;
    margin-top: 10px;
    padding: 5px;
}
.sub_list .title {
    display: -webkit-box;
    max-height: 36px; /* line-height * -webkit-line-clamp*/
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 15px;
    line-height: 18px;
    color: #090909;
}
.sub_list .category_link {
    display: block;
    padding-top: 3px;
    font-size: 12px;
    line-height: 15px;
    color: #7ba7df;
    /* 길어졌을 때 한 줄 말줄임 될 수 있도록 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

요약 정리
- 이미지 정렬: float, clear(부모가 자식요소의 높이를 인식할 수 있도록), :nth-child(an + b)
- 이미지 액자: :after, position, border, rgba
- 텍스트 말줄임: text-overflow, overflow, white-space (여기까지가 한줄 말줄임), -webkit-box, -webkit-box-orient, -webkit-line-clamp, height (여러 줄 말줄임)