카테고리 없음

제27차_사업개발캠프 블로그( HTML기초와 CSS기초 15~22강)

digital520 2024. 2. 14. 14:23

상품 정보 테이블 만들기

상품 정보 테이블 만들기 | Notion

다양한 Tag와 CSS 선택자를 활용하면 여러분이 생각만 했던 서비스의 Mock-up(목업)을 직접 만들어볼 수 있습니다. 상상만 했던 걸 현실화시키기 위해서는 단순한 것이라도 실행을 해봐야 합니다.

legend-palm-1f1.notion.site

다양한 Tag와 CSS를 활용해 서비스의 Mock-up(목업) 결과물을 만들어 봅니다.

다양한 Tag와 CSS 선택자를 활용하면 여러분이 생각만 했던 서비스의 Mock-up(목업)을 직접 만들어볼 수 있습니다. 상상만 했던 걸 현실화시키기 위해서는 단순한 것이라도 실행을 해봐야 합니다. 이번 기회에 여러분의 상상을 현실화 시켜보시면 좋겠습니다.

완성 화면 예시(완전히 똑같이 만들기 보다는 여러분의 아이디어를 최대한 표현한 결과물을 만들어주세요)

완성 화면 예시(완전히 똑같이 만들기 보다는 여러분의 아이디어를 최대한 표현한 결과물을 만들어주세요)

화면 기록 2024-02-06 오전 12.47.15.mov

4.85MB

가이드 코드를 이용해 위에 제시된 영상의 결과물을 만들어보세요

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
		<meta name="keywords" content="검색 키워드를 넣어주세요"/> 
		<meta name="description" content="사이트 설명을 넣어주세요"/>

    <title>KREAM 신규 상품 목록</title>
    <style>
        /* 스타일링을 위한 CSS 코드 */
        table {
            border-collapse: collapse;
        }
        th, td {
            
        }
        th {

        }
        th:hover {

        }
    </style>
</head>
<body>
    <h1><a href="">KREAM</a> 신규 상품 목록</h1>
    
    <!-- 카테고리 선택을 위한 select 태그 -->
    <select id="categorySelect">
        <option value="" disabled selected>카테고리를 선택해주세요</option>
        <option value="후드"></option>
        <option value="맨투맨"></option>
        <option value="모자"></option>
        <option value="바지"></option>
    </select>
    <!-- 검색 기능을 위한 input 태그 -->
  
    <button>검색</button>
    <br><br>

    <!-- 제품 정보를 표시할 Table 태그 -->
    <table>
      
    </table>
</body>
</html>

정답(참고용으로만 봐주세요)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제품 목록</title>
    <style>
        /* 스타일링을 위한 CSS 코드 */
        table {
            width: 1000px;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #333;
        }
        th {
            background-color: #333;
            color: #fff;
        }
        th:hover {
            color: aqua;
        }
    </style>
</head>
<body>
    <h1><a href="https://kream.co.kr/">KREAM</a> 신규 상품 목록</h1>

    
    <select id="categorySelect">
        <option value="" disabled selected>카테고리를 선택해주세요</option>
        <option value="후드">후드</option>
        <option value="맨투맨">맨투맨</option>
        <option value="모자">모자</option>
        <option value="바지">바지</option>
    </select>
    
    <input type="text" id="searchInput" placeholder="제품명을 입력하세요...">
    <button>검색</button>
    <br><br>

    <table>
        <tr>
            <th>브랜드</th>
            <th>카테고리</th>
            <th>제품명</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>브랜드 A</td>
            <td>후드</td>
            <td>상품 A</td>
            <td>100,000원</td>
        </tr>
        <tr>
            <td>브랜드 B</td>
            <td>맨투맨</td>
            <td>상품 B</td>
            <td>200,000원</td>
        </tr>
        <tr>
            <td>브랜드 C</td>
            <td>모자</td>
            <td>상품 C</td>
            <td>300,000원</td>
        </tr>
        <tr>
            <td>브랜드 D</td>
            <td>바지</td>
            <td>상품 D</td>
            <td>150,000원</td>
        </tr>
    </table>
</body>
</html>

나의 과제물

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="제주도,여행,스마트 관광,빅데이터,인공진능, MBTI,백패킹,트래킹,스노쿨링,힐링,치유,체험,숙박,교통,관광지,여행일정" />
    <meta name="description" content="스마트 관광, 힐링, 체험,백스노쿨링은 백스노쿨링 다이어리에서!" />

    <title>백스노쿨링 신규 상품 목록</title>
    <style>
        /* 스타일링을 위한 CSS 코드-  테이블 스타일 */

        table {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px #ddd;
        }

        /* 테이블 헤더 스타일 */
        th,
        td {
            background-color: #333;
            color: #fff;
            padding: 15px;
            text-align: center;
            border: 1px solid #ddd;
        }

        /*테이블 바디 스타일 */
        th {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }

        /* 테이블 호버 효과*/
        th:hover {
            background-color: #f2f2f2;

        }

        /* 검색창 스타일 */
        #searchInput {
            width: 200px;
            padding: 5px;
            border: 1px solid #ddd;
        }

        /* 검색 버튼 스타일 */
        #searchButton {
            padding: 5px 10px;
            border: 1px solid #ddd;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1><a href="">백스노쿨링 다이어리</a> 신규 상품 목록</h1>

    <select id="categorySelect">
        <option value="" disabled selected>카테고리를 선택해주세요</option>
        <option value="스노클링">스노클링</option>
        <option value="백패킹">백패킹</option>
        <option value="트래킹">트래킹</option>
        <option value="힐링">힐링</option>
        <option value="체험">체험</option>
    </select>

    <input type="text" id="searchInput" placeholder="상품명을 검색해보세요">

    <button id="searchButton">검색</button>
    <br><br>

    <table>
        <tr>
            <th>브랜드</th>
            <th>카테고리</th>
            <th>제품명</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>브랜드 A</td>
            <td>스노쿨링</td>
            <td>상품 A</td>
            <td>100,000원</td>
        </tr>
        <tr>
            <td>브랜드 B</td>
            <td>백패킹</td>
            <td>상품 B</td>
            <td>200,000원</td>
        </tr>
        <tr>
            <td>브랜드 C</td>
            <td>트래킹</td>
            <td>상품 C</td>
            <td>300,000원</td>
        </tr>
        <tr>
            <td>브랜드 D</td>
            <td>힐링</td>
            <td>상품 D</td>
            <td>150,000원</td>
        </tr>
        <tr>
            <td>브랜드 E</td>
            <td>체험</td>
            <td>상품 E</td>
            <td>150,000원</td>
        </tr>

    </table>
</body>

</html>

과제 제출 방법

이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 mission.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!

셀프 채점 기준

[ ] HTML 태그의 기능을 알고 활용할 수 있는지
[ ] CSS 선택자를 이용해 원하는 태그를 선택할 수 있는지
[ ] CSS 기능을 이용해 원하는 스타일로 변경할 수 있는지

일일 클래스&학습 도서 리뷰

개념을 명확하게 이해하기 위해서는 타인에게 가르치는 것이 가장 효율적입니다. 글쓰기 또한 그 방법 중 하나입니다.

실습 과제

오늘 VOD 강의 및 학습 도서를 통해 배운 내용 중 핵심 개념을 블로그에 정리하여 작성해 주세요.

HTML 기초

1. HTML 파일 만들기:

<!DOCTYPE html>: HTML 버전 선언 (최신 버전: <!DOCTYPE html>)
html: HTML 문서 시작 태그
head: 문서 정보 포함 태그
- meta charset="UTF-8">: 문자 인코딩 설정 (UTF-8)
- title: 웹 페이지 제목 설정
body: 웹 페이지 본문 내용 포함 태그

2. 메타 태그:

meta name="keywords" content="키워드1, 키워드2">: 검색 엔진 최적화 (SEO)
meta name="description" content="웹 페이지 설명">: 검색 결과 설명

3. 실습:

HTML 파일 만들기
메타 태그 추가
타이틀 설정
1. HTML 파일 만들기:
  - 유형을 .html로 설정하고 저장
  - 기본적인 HTML 구조 작성 (DOCTYPE, HTML, head, body)
2. HTML 문서 구조:
  - DOCTYPE: HTML 문서 버전 선언
  - HTML: HTML 문서 시작 태그
  - head: 문서 정보 포함 (메타 태그, 타이틀 태그 등)
  - body: 실제 웹사이트 내용 포함
3. 메타 태그:
  - charset: 문서 문자 인코딩 설정 (UTF-8 사용 권장)
  - keywords: 검색 엔진 최적화 (SEO)를 위한 키워드 설정
  - description: 검색 결과에 표시되는 설명 작성
4. 타이틀 태그:
  - 웹사이트 제목 설정
  - 브라우저 탭과 검색 결과에 표시

추가 정보:

HTML 태그는 쌍으로 사용 (예: <p>와 </p>)
들여쓰기 사용하여 코드 가독성 향상
웹 개발 도구 사용

강의 링크: https://www.youtube.com/watch?v=XdFWx0lO5B4&list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is&index=1

강의 내용: HTML 기초 (2)

주요 내용:

본문 태그:
- <h1> ~ <h6>: 제목 표시 (숫자가 작을수록 크기가 커짐)
- <pre>: 띄어쓰기 및 줄바꿈 유지
- <br>: 줄바꿈
강조 태그:
- <strong>: 굵게 표시
목록 태그:
- <ul> & <li>: 순서 없는 목록
- <ol> & <li>: 순서 있는 목록
- <dl> & <dt> & <dd>: 정의 목록

강의 요약:

본문 태그:
- <h1> ~ <h6>: 제목 표시
  - 숫자가 작을수록 크기가 커짐 (h1 > h2 > h3 ...)
- <pre>: 띄어쓰기 및 줄바꿈 유지
  - 코드 예시, 텍스트 정렬 등에 사용
- <br>: 줄바꿈
강조 태그:
- <strong>: 굵게 표시
목록 태그:
- <ul> & <li>: 순서 없는 목록
  - <ul>: 목록 시작 태그
  - <li>: 각 목록 항목 태그
- <ol> & <li>: 순서 있는 목록
  - <ol>: 순서 있는 목록 시작 태그
  - <li>: 각 목록 항목 태그
- <dl> & <dt> & <dd>: 정의 목록
  - <dl>: 정의 목록 시작 태그
  - <dt>: 용어 태그
  - <dd>: 용어 설명 태그

강의 내용: HTML 기초 (3)

주요 내용:

입력 태그:
- 다양한 타입: 텍스트, 비밀번호, 색상, 파일, 라디오 버튼, 체크박스
링크 태그:
- a 태그 사용: 링크 주소 및 텍스트 지정
이미지 태그:
- img 태그 사용: 이미지 주소 지정

강의 요약:

입력 태그:
- 다양한 타입을 사용하여 다양한 입력 방식 구현 가능
  - text: 일반 텍스트 입력
  - password: 비밀번호 입력 (입력 시 숨겨짐)
  - color: 색상 선택
  - file: 파일 업로드
  - radio: 라디오 버튼 (선택 그룹 구성)
  - checkbox: 체크박스 (여러 선택 가능)
링크 태그:
- a 태그 사용하여 링크 생성
  - href: 링크 주소 지정
  - 링크 텍스트: 클릭 시 이동하는 텍스트
이미지 태그:
- img 태그 사용하여 이미지 삽입
  - src: 이미지 주소 지정

참고:

강의 내용은 요약된 버전입니다. 자세한 내용은 강의를 참고하십시오.
실습을 통해 학습 효과를 높일 수 있습니다.
궁금한 사항은 강의 댓글이나 커뮤니티에 질문하십시오.

추가 정보:

HTML 태그에 대한 더 자세한 정보는 다음 사이트를 참고하십시오.
- MDN Web Docs - HTML: https://developer.mozilla.org/ko/docs/Web/HTML
- W3Schools HTML Tutorial: https://www.w3schools.com/html/

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

HTML Tutorial

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

강의 내용: HTML 기초 (4)

주요 내용:

테이블 태그:
- 테이블 구조 만들기: <table>, </table>
- 제목 행: <tr>, <th>, </th>
- 데이터 행: <tr>, <td>, </td>
- 테두리 설정: border 속성
예시

<table>
    <tr>
        <th>제목</th>
        <th>내용</th>
    </tr>
    <tr>
        <td>이름</td>
        <td>김철수</td>
    </tr>
    <tr>
        <td>나이</td>
        <td>20세</td>
    </tr>
</table>

아이프레임 태그:
- 외부 사이트를 내 사이트에 삽입
- iframe 태그 사용
- 크기 조절: width, height 속성
예시

<iframe src="https://www.lifeking.com"></iframe>

주석:
- 주석처리 (crrl + / )
- 컴퓨터는 읽지 못하지만 사람은 읽을 수 있는 메모
- 코드 설명, 협업, 디버깅 등에 활용

강의 내용: CSS 기초 (1)

주요 내용:

CSS란 무엇인가?
- HTML로 만든 웹 페이지의 요소들을 꾸미는 언어
- 색상, 위치, 글꼴 등을 변경하여 페이지 디자인 가능
CSS 적용 방법:
- 인라인 스타일: 태그 속성에 직접 스타일 지정
- 임베디드 스타일: head 태그 안에 style 태그 사용
- 외부 스타일: 별도의 CSS 파일 연결

강의 요약:

CSS란 무엇인가?
- HTML은 웹 페이지의 구조를 만드는 언어
- CSS는 HTML 요소들을 꾸미는 언어
- 색상, 글꼴, 크기, 위치 등을 조정하여 페이지 디자인 가능
CSS 적용 방법:
- 인라인 스타일:
  - 각 태그에 style 속성을 사용하여 직접 스타일 지정
  - 간단한 스타일 적용에 유용
  - 코드 가독성이 떨어질 수 있음
  예시:

<div style="color: red; font-size: 20px;">안녕하세요</div>

3. 임베디드 스타일:

head 태그 안에 style 태그를 사용하여 스타일 지정
페이지 전체에 적용되는 스타일 설정에 유용
인라인 스타일보다 가독성이 높음

예시:

<head>
    <style>
        div {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>안녕하세요</div>
</body>

4. 외부 스타일:

별도의 .css 파일을 만들어 스타일 지정
여러 페이지에 동일한 스타일 적용 시 유용
코드 관리 및 유지 보수가 용이

예시:

<link rel="stylesheet" href="style.css">

외부 스타일: 예시 파일명 _style.css:

div {
    color: red;
    font-size: 20px;
}

추가 설명:

CSS 선택자: 어떤 HTML 요소에 스타일을 적용할지 지정하는 방법
CSS 속성: 요소의 특성을 지정하는 것 (예: 색상, 크기, 위치)
CSS 속성값: 속성에 적용될 값 (예: red, 10px, center)

강의 내용: CSS 기초(2)

주요 내용:

폰트 속성:
- font-weight: 글자 두께 조절

div {
  font-weight: 100; /* 얇게 */
  font-weight: 400; /* 기본 */
  font-weight: 700; /* 두껍게 */
}

div {
  font-size: 12px; /* 기본 */
  font-size: 16px; /* 크게 */
  font-size: 24px; /* 매우 크게 */
}

text-align: 글자 정렬 (left, center, right)

div {
  text-align: left; /* 왼쪽 정렬 */
  text-align: center; /* 가운데 정렬 */
  text-align: right; /* 오른쪽 정렬 */
}

텍스트 장식 속성:
- text-decoration: 밑줄, 위줄, 중앙선 등 장식 (underline, overline, line-through)

div {
  text-decoration: underline; /* 밑줄 */
  text-decoration: overline; /* 위줄 */
  text-decoration: line-through; /* 중앙선 */
  text-decoration: none; /* 장식 없음 */
}

배경 속성:
- background-color: 배경 색상 지정

div {
  background-color: red;
  background-color: blue;
  background-color: green;
}

padding: 여백 설정

div {
  padding: 10px; /* 상하좌우 10px 여백 */
  padding: 10px 20px; /* 상하 10px, 좌우 20px 여백 */
  padding: 10px 20px 30px 40px; /* 상하좌우 각각 여백 설정 */
}

letter-spacing: 글자 간 간격 조절

div {
  letter-spacing: 1px; /* 글자 간 1px 간격 */
  letter-spacing: 2px; /* 글자 간 2px 간격 */
}

텍스트 그림자 속성:
- text-shadow: 글자 그림자 효과 추가

div {
  text-shadow: 1px 1px 2px black; /* 오른쪽 1px, 아래쪽 1px, 흐림 2px, 검정색 그림자 */
  text-shadow: 2px 2px 4px red; /* 오른쪽 2px, 아래쪽 2px, 흐림 4px, 빨간색 그림자 */
}

실제 예시:

<div>
  안녕하세요!
</div>

div {
  font-family: Arial, sans-serif; /* 폰트 지정 */
  font-weight: 400; /* 글자 두께 */
  font-size: 16px; /* 글자 크기 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 장식 없음 */
  background-color: white; /* 배경 색상 */
  padding: 20px; /* 여백 */
  letter-spacing: 1px; /* 글자 간 간격 */
  text-shadow: 1px 1px 2px gray; /* 그림자 */
}

DIV의 hover 속성

1. 개요

이전 코드에서 DIV에 마우스를 올렸을 때 배경색이 빨간색으로 변하는 효과를 만들었습니다. 이 효과는 hover 속성을 사용하여 구현되었습니다.

2. hover 속성

hover 속성은 마우스 포인터가 요소 위에 있을 때 적용되는 스타일을 정의합니다.
hover 속성은 마우스가 요소를 떠날 때 적용되던 스타일로 되돌아갑니다.

3. 예시

<div>
  <h1>안녕하세요</h1>
</div>

div:hover {
  background-color: red;
}

위 코드에서:

div 요소에 마우스를 올리면 배경색이 빨간색으로 변합니다.
마우스를 div 요소에서 떼면 배경색이 원래대로 돌아갑니다.

4. hover 속성과 함께 사용할 수 있는 속성

background-color: 배경색
color: 글자 색상
text-decoration: 밑줄, 취소선, 굵게 표시 등
border: 테두리
cursor: 커서 모양
font-size: 글꼴 크기
font-weight: 글꼴 굵기
text-align: 글자 정렬
padding: 여백
margin: 여백

5. 핵심

hover 속성은 마우스 포인터가 요소 위에 있을 때 적용되는 스타일을 정의합니다.
hover 속성은 다양한 속성과 함께 사용할 수 있습니다.

HTML 요소 선택 방법

1. 개요

이전 코드에서 두 개의 DIV 요소에 동일한 스타일이 적용되었습니다. 하지만 특정 요소에만 스타일을 적용해야 하는 경우가 발생합니다. 이 경우 다음과 같은 방법을 사용할 수 있습니다.

2. 아이디 값 사용

각 DIV 요소에 고유한 아이디 값을 부여합니다.
CSS 선택자에서 # 기호와 아이디 값을 사용하여 특정 요소를 선택합니다.

예시

<div id="div-a">
  <h1>안녕하세요</h1>
</div>

<div id="div-b">
  <h2>반갑습니다</h2>
</div>

#div-a {
  color: red;
}

#div-b {
  color: blue;
}

위 코드에서:

#div-a 아이디를 가진 DIV 요소는 color: red; 스타일을 적용받습니다.
#div-b 아이디를 가진 DIV 요소는 color: blue; 스타일을 적용받습니다.

3. 클래스 값 사용

여러 요소에 동일한 스타일을 적용해야 하는 경우 클래스 값을 사용합니다.
CSS 선택자에서 . 기호와 클래스 값을 사용하여 여러 요소를 선택합니다.

예시

<div class="notice">
  <h1>공지</h1>
</div>

<div class="notice">
  <h2>긴급 공지</h2>
</div>

.notice {
  background-color: yellow;
}

위 코드에서:

notice 클래스를 가진 모든 DIV 요소는 background-color: yellow; 스타일을 적용받습니다.

4. 선택자 조합

여러 선택자를 조합하여 더욱 정교하게 요소를 선택할 수 있습니다.
예를 들어, #div-a.notice 선택자는 #div-a 아이디 와 notice 클래스를 가진 요소를 선택합니다.

5. 핵심

아이디 값은 고유해야 합니다.
클래스 값은 여러 요소에 동일하게 사용할 수 있습니다.
선택자를 조합하여 더욱 정교하게 요소를 선택할 수 있습니다.

CSS 아이디와 클래스의 차이점

1. 개요

CSS 아이디와 클래스는 HTML 요소에 스타일을 적용하는 데 사용되는 선택자입니다. 하지만 두 가지는 다음과 같은 중요한 차이점이 있습니다.

2. 유일성

아이디: 페이지 내에서 고유해야 합니다. 즉, 동일한 아이디를 가진 요소가 두 개 이상 있을 수 없습니다.
클래스: 여러 요소에 동일한 클래스 이름을 사용할 수 있습니다.

3. 적용 범위

아이디: 특정 요소에만 스타일을 적용하는 데 사용됩니다.
클래스: 여러 요소에 동일한 스타일을 적용하는 데 사용됩니다.

4. 우선순위

아이디: 클래스보다 높은 우선순위를 가지고 있습니다. 즉, 동일한 요소에 아이디와 클래스가 모두 적용된 경우 아이디 스타일이 우선 적용됩니다.

5. 예시

<div id="header">
  <h1>제목</h1>
</div>

<div class="content">
  <p>본문</p>
</div>

<div class="content">
  <p>본문</p>
</div>

#header {
  background-color: red;
}

.content {
  background-color: blue;
}

위 코드에서:

#header 아이디는 background-color: red; 스타일을 적용받습니다.
content 클래스는 두 개의 요소에 적용되어 두 요소 모두 background-color: blue; 스타일을 적용받습니다.

6. 추가 설명

아이디는 주민등록번호처럼 고유한 값이라고 생각하면 됩니다. 한 페이지 내에서 동일한 아이디를 가진 요소가 두 개 이상 있으면 오류가 발생합니다.
클래스는 여러 요소에 동일한 스타일을 적용할 때 유용합니다. 예를 들어, 모든 버튼에 동일한 스타일을 적용하려면 button 클래스를 사용할 수 있습니다.

7. 핵심

아이디: 고유한 값, 특정 요소에 스타일 적용
클래스: 동일한 값을 여러 요소에 사용 가능, 여러 요소에 동일한 스타일 적용

HTML/CSS 선택자, 테두리, 여백 강좌 요약

1. 선택자

태그 선택자: 특정 태그 (예: div, p) 에 스타일을 적용합니다.

div {
  color: red;
}

ID 선택자: 특정 ID를 가진 요소에 스타일을 적용합니다.

#test {
  color: blue;
}

클래스 선택자: 특정 클래스를 가진 모든 요소에 스타일을 적용합니다.

.test2 {
  color: green;
}

1.2 우선순위

여러 선택자가 동일한 요소에 적용될 때, 가장 마지막에 적용된 선택자의 속성이 우선 적용됩니다.

<div id="test" class="test2">
  안녕하세요
</div>

#test {
  color: blue;
}
.test2 {
  color: green;
}

위 코드 예시에서는 .test2 선택자가 마지막에 적용되므로 텍스트 색상은 초록색으로 표시됩니다.

2. 테두리

border: 테두리 속성을 설정합니다.
border-style: 테두리 모양 (예: solid, dotted) 을 설정합니다.
border-width: 테두리 두께를 설정합니다.
border-color: 테두리 색상을 설정합니다.

#test {
  border: 1px solid red;
}

border-radius: 테두리 모서리 곡률을 설정합니다.

#test {
  border: 1px solid red;
  border-radius: 10px;
}

3. 여백

margin: 요소 외부 여백을 설정합니다.
padding: 요소 내부 여백을 설정합니다.
margin-top: 위쪽 여백을 설정합니다.
margin-right: 오른쪽 여백을 설정합니다.
margin-bottom: 아래쪽 여백을 설정합니다.
margin-left: 왼쪽 여백을 설정합니다.
padding-top: 위쪽 내부 여백을 설정합니다.
padding-right: 오른쪽 내부 여백을 설정합니다.
padding-bottom: 아래쪽 내부 여백을 설정합니다.
padding-left: 왼쪽 내부 여백을 설정합니다.

#test {
  margin: 10px;
  padding: 5px;
}

3.3 자동 여백 설정

margin: 0 auto;: 좌우 여백을 자동으로 설정하여 요소를 가운데 정렬

#test {
  margin: 0 auto;
  width: 200px;
}

4. 축약 표기법

margin: 4개의 값을 한 번에 지정할 수 있습니다. (위, 오른쪽, 아래, 왼쪽 순서)
padding: 4개의 값을 한 번에 지정할 수 있습니다. (위, 오른쪽, 아래, 왼쪽 순서)

#test {
  margin: 10px 20px; /* 상하 10px, 좌우 20px */
  padding: 5px 10px; /* 상하 5px, 좌우 10px */
}

5. 주의 사항

속성 순서: 속성 순서는 중요하지 않습니다. 하지만 일반적으로 border 속성을 먼저 사용하는 것이 좋습니다.
중복된 속성: 같은 속성을 여러 번 지정하면 마지막으로 지정된 속성만 적용됩니다.
상속: 요소는 부모 요소로부터 스타일을 상속받습니다.

주의할 점은 해당 강의를 보지 않은 사람이 이해할 수 있도록 타인에게 가르치듯이 작성해주세요.
- 단순 개념을 정리한 글과 타인에게 정보 전달을 위한 글은 형식 부터 차이가 있습니다.
  - 단순 개념 정리 : https://jkkou.tistory.com/42
  - 가르치듯 작성된 글 : https://ibks-platform.tistory.com/373

왜 클래스 리뷰를 하나요?
단순 강의를 듣는 것만으로는 절대로 기억할 수 없습니다. 다른 사람을 가르치는 글을 작성하는 것만으로도 기억율을 극단적으로 높힐 수 있습니다.

셀프 채점 기준

[ ] 단순 개념 정리가 아니라 타인에게 개념을 설명해 주는 형태로 작성되었는지
[ ] 강의 내용을 그대로 작성한 것이 아니라 본인의 생각이 들어갔는지

현재글제27차_사업개발캠프 블로그( HTML기초와 CSS기초 15~22강)

digital520

Today :
Yesterday :

digital520

제27차_사업개발캠프 블로그( HTML기초와 CSS기초 15~22강)

상품 정보 테이블 만들기

가이드 코드를 이용해 위에 제시된 영상의 결과물을 만들어보세요

정답(참고용으로만 봐주세요)

나의 과제물

과제 제출 방법

셀프 채점 기준

일일 클래스&학습 도서 리뷰

실습 과제

HTML 기초

HTML/CSS 선택자, 테두리, 여백 강좌 요약

셀프 채점 기준

'카테고리 없음'의 다른글

티스토리툴바

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