close
프로필 배경
프로필 로고

도로그

HTML/Css · 2023. 8. 7. fullscreen 넓게보기

[CSS] box, border, padding, margin, width

짝수 홀수 행 색상

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/19_etc_structure.css">
</head>
<body>
    <ul>
        <!-- 줄복사 : ctrl + d(인텔리제이 단축키) -->
        <li>첫 번째</li>
        <li>두 번째</li>
        <li>세 번째</li>
        <li>네 번째</li>
        <li>다섯 번째</li>
        <li>여섯 번째</li>
        <li>일곱 번째</li>
    </ul>
</body>
</html>

css

/* 구조 선택자 */
li {
    /* 목록 앞에 점 없애기 */
    list-style-type: none;
}

/* 2n : 짝수, 2n+1 : 홀수
    사용법:
        선택자:nth-child(수식) {
            속성:값;
        }
*/
li:nth-child(2n) {
    /* 10진수 : 1 ~ 9까지 , 16진수: 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수: 0,1 */
    /* 16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f) */
    /* 색깔 지정 : red, (#16진수 6자리, 색상표 표기)  */
background-color: #ff0003;
}

li:nth-child(2n+1) {
    background-color: #800000;
}

결과

exam css8

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/20_exam_css_8.css">
</head>
<body>
    <h1 class="heading">HTML</h1>
</body>
</html>

css

h1 {
    font-size: 60px;
}

.heading {
    /* 화면 단위 : px(픽셀, 고정크기),
            %(부모의 크기를 물려받아 사용,) */
    /*가로  */
     width: 100%;
    /*세로  */
    height: 100px;
    /* 배경색(바탕색) */
    background-color: #222;
    /* 글자색 : 키워드(red, orange), #16진수,
                rgb(숫자,숫자,숫자)  */
    /* 글자색 */
    color: rgb(255, 255, 255);
    text-align: center;
}

fontsize

 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/21_font_size.css">
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

css

/* 글자 단위 : px, em(rem), % */
/* 1st p태그 선택 */
p:nth-child(1) {
    /* 상대 크기 단위 */
    /* 1.0em == 16px(웹 브라우저 기본 글자 단위: 부모 태그에서 상속받음) */
    /* font-size: 100% == 1.0em == 16px */
    /* font-size: 1.0em; */
    /* 고정 크기 */
    font-size: 16px;
}

/* 2nd p태그 선택 */
p:nth-child(2) {
    font-size: 1.5em;
}

/* 3nd p태그 선택 */
p:nth-child(3) {
    font-size: 2.0em;
}

결과

Box

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_box_width_height.css">
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

css

/* box 기본 속성 : 높이, 가로, 바깥여백, 안쪽여백, 외곽선 */
div {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 배경색 */
    background-color: red;
    /* 외곽선 */
    /* 사용법 : border: 선두께 선스타일 선색깔 */
    border: 5px solid orange;
    /* 안쪽 여백(padding) */
    padding: 30px;
    /* 바깥 여백(margin) */
    margin: 10px;
}

결과

Box detail

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_box_detail.css">
</head>
<body>
    <div></div>
</body>
</html>

css

/* box 기본 속성 : 상세 */
div {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 외곽선 */
    /* border: 선두께 선스타일 선색깔 */
    border: 5px solid orange;
    /* 안쪽 여백 : 상/좌/하/우 */
    /* 축약형 :  */
    /* padding: 상 우 하 좌 (12시 기준으로 시계방향 한바뀌 돈다)*/
    padding: 30px 0 30px 0;
    /* padding-left: 0px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 30px; */

    /* 바깥 여백 : 상/좌/하/우 */
    /* 축약형 */
    /* margin: 상 우 하 좌 */
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
}

결과

/* box 기본 속성 : 상세 */
div {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 외곽선 */
    /* border: 선두께 선스타일 선색깔 */
    border: 5px solid orange;
    /* 안쪽 여백 : 상/좌/하/우 */
    /* 축약형 :  */
    /* padding: 상 우 하 좌 (12시 기준으로 시계방향 한바뀌 돈다)*/
    padding: 30px 0 30px 0;
    /* padding-left: 0px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 30px; */

    /* 바깥 여백 : 상/좌/하/우 */
    /* 축약형 */
    /* margin: 상 우 하 좌 */
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
}

table box exam

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/03_exam_table_box_1.css">
</head>
<body>
    <!-- border-collapse: collapse; (테이블의 안쪽선붙이기 속성) -->
    <h3>태풍 정보</h3>
    <table>
        <tr>
            <th rowspan="2">일시</th>
            <th colspan="2">중심위치</th>
            <th rowspan="2">중심기압(hPa)</th>
            <th colspan="2">최대풍속</th>
        </tr>
        <tr>
            <td>위도</td>
            <td>경도</td>
            <td>초속(m/s)</td>
            <td>시속(km/s)</td>
        </tr>
    </table>
</body>
</html>

css

/* 문제 풀이 */
/* 선택자들에게 공통된 속성 적용하기 */
/* 사용법 :
    선택자, 선택자2, ...{
        속성:값;
     }
 */
table, tr, th, td {
    /* 외곽선 : border: 선두께 선스타일 선색상 */
    border: 1px solid black;
    /* 테이블 선사이 간격 붙이기 속성 */
    border-collapse: collapse;
    /* 안쪽 여백 */
    padding: 8px;
}

table box exam2

html

<!-- 04_exam_2.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/04_exam_2.css">
  </head>
  <body>
    <h3 id="title1">딸기</h3>
    <p>
      딸기는 25℃ 이하의 <span id="weather">선선한 기후</span>
      를 좋아하는 여러해살이 열매 채소로 5월에
      열매를 수확합니다. 다른 작물에 비해 잘 기르기 위해서
      많은 노력이
      필요합니다.
    </p>
    <h3 id="title2">양평 딸기 축제</h3>
    <ul>
      <li>일 시 : 2018년 1월 15일~5월 15일</li>
      <li>장 소 : <span id="location">양평군
                    내 딸기 마을</span></li>
      <li>연락처 : 031-774-0000</li>
      <li id="notice">일정은 바뀔 수 있으므로
        방문 전 전화 요망</li>
    </ul>
  </body>
</html>

css

#title1 {
    color: purple;
}

#weather {
    color: red;
    font-weight: bold;
}

#title2 {
    color: green;
}

#location {
    font-weight: bold;
}

#notice {
    color: blue;
    font-weight: bold;
}

table box exam3

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/05_exam_box_3.css">
</head>
<body>
    <h3>도심 속 생태문화공원 서울대공원</h3>
</body>
</html>

css

h3 {
    width: 400px;
    border: 5px solid #e1285a;
    padding: 10px
}

table box exam4

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/06_exam_box_4.css">
</head>
<body>
    <h3 id="title1">도심 속 생태문화공원 서울대공원</h3>
    <h3 id="title2">도심 속 생태문화공원 서울대공원</h3>
    <h3 id="title3">도심 속 생태문화공원 서울대공원</h3>
</body>
</html>

css

#title1 {
    /* 외곽선 (위쪽) */
    /* border-top: 선두께 선스타일 선색상 */
    border-top: 3px solid black;
    /* 가로크기 */
    width: 345px;
    /* 안쪽 여백 */
    padding: 5px
}

#title2 {
    /* 외곽선 (왼쪽) */
    border-left: 3px solid #e1285a;
    /* 가로크기 */
    width: 345px;
    /* 안쪽 여백 */
    padding: 5px
}

#title3 {
    /* 외곽선 */
    /* border: 선두께 선스타일 선색상 */
    border: 2px solid skyblue;
    /* TODO: 둥근 사각형 속성 */
    /* TODO: 사용법 - border-radius: 크기; (크기가 클수록 원이됨) */
    border-radius: 3px;
    /* 안쪽 여백 */
    padding: 5px;
    /* 가로 크기 */
    width: 345px;
}

table box exam5

html

<!-- 07_exam_box_5.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/07_exam_box_5.css">
  </head>
  <body>
    <h3>웹이란?</h3>
    <p>
      - 웹(Web)은 거미줄을 뜻하는 말로 WWW(World Wide Web)의 약어입니다.<br />
      - 인터넷과 웹 브라우저를 통해 사용자에게 정보를 제공하고 서로 소통하게
      해줍니다.<br />
      - 웹과 관련된 직업에는 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹
      프로그래머가 있습니다.<br />
    </p>
  </body>
</html>

css

h3 {
    /* 외곽선 */
    /* border: 선두께 선스타일 색깔 */
    border: 5px solid blue;
    /* 안쪽 여백 */
    padding: 20px;
    /* 바깥 여백 */
    margin: 30px;
}

table box exam6

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/08_exam_box_6.css">
</head>
<body>
    <h3>동물원 속 온실식물원</h3>
    <p>
        온실식물원은 울창한 숲으로 둘러싸인 청계산 자락에 위치하고
        있으며, 총 928종의 다양한 식물이 전시되고 있습니다.
    </p>
</body>
</html>

css

h3 {
    /* 왼쪽 외곽선 */
    /* border-left: 선두께 선스타일 선색깔 */
    border-left: 8px solid blue;
    padding: 10px;
}

p {
    /* 외곽선 */
    border: 1px solid black;
    width: 500px;
    /* 안쪽 여백 */
    padding: 20px;
    /* 바깥 여백(위쪽) */
    margin-top: 20px;
}

table box exam7

html

<!-- 09_exam_box_7.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/09_exam_box_7.css">
  </head>
  <body>
    <h3>주말 야간 개장 안내</h3>
    <ul>
      <li>- 기간 : 7.28~8.20 09:00~21:00 (입장마감 20시)</li>
      <li>- 대상 : 동물원, 식물원</li>
      <li>- 프로그램 : 야간동물원 관람, 동물생태 설명회, 식물전시</li>
    </ul>
  </body>
</html>

css

h3 {
    margin-top: 20px;
    margin-left: 20px;
}
ul {
    border: 1px solid black;
    /* 축약형 */
    padding: 20px 30px 30px 30px;
    /* 가로크기 */
    width: 450px;
    /* 축약형 : margin 상 우 하 좌 */
    margin: 20px 0 0 20px;
}

li {
    /* 목록 앞에 점 없애기 */
    list-style: none;
    /* 외곽선(점선) */
    /* border-bottom: 선두께 선스타일(점선) 색상 */
    border-bottom: 1px dotted gray;
    /* 안쪽 여백(축약형) : padding 상 우 하 좌 */
    padding: 10px 0 10px 0;
}
저작자표시

'HTML > Css' 카테고리의 다른 글

[CSS] position  (0) 2023.08.11
[CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span  (0) 2023.08.09
[CSS] box collapse schedule  (0) 2023.08.08
[CSS] 폰트, 밑줄, 글자 속성, 정렬  (0) 2023.08.04
[CSS] 사용법 및 입문  (0) 2023.08.03
HTML/Css 관련 글
더 보기

티스토리툴바