day HTML CSS 04

JTH·2023년 2월 21일
CSShtml
0

gb_jth

목록 보기
47/56
  1. box 01
<!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>
    <style>
        #box1{background-color: tomato;}
        #box2{background-color: green;}
        #box3{background-color: powderblue;}
    </style>
</head>
<body>
    <div id="box1">빨강 박스</div>
    <div id="box2"></div>
    <div id="box3">파랑 박스</div>
    
</body>
</html>
Document
빨강 박스
파랑 박스
  1. box 2
<!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>
    <style>
        /* 모든 div에 대한 처리 */
        div{
            width: 200px; height: 50px;
        }
        .box1{
            background-color: tomato;
        }
        .box2{
            background-color: rgb(209, 228, 65);
            border: 10px solid black
        }
        .box3{
            background-color: rgb(45, 188, 121);
            padding: 10px;
        }
        .box4{
            background-color: rgb(36, 14, 97);
        }
    </style>
</head>
<body>
    <div class="box1">박스1</div>
    <div class="box2">박스2</div>
    <div class="box3">박스3</div>
    <div class="box4">박스4</div>
</body>
</html>

뭔가 오류남 확인

3.box 3

<!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>
    <style>
        p{
            border: 10px solid tomato;
            padding: 40px;
            margin: 40px;
        }
    </style>
</head>
<body>
    <p>
        Where does it come from?
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </p>
    <p>
        Where does it come from?
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </p>
</body>
</html>
  1. box 4

.. 관련코드들은 모두 비주얼 스튜디오 안에 저장되어있음 확인

  1. box5

  2. cascading

  3. class

  4. parent

  5. selector

  6. text

1. CSS

  • Cascading Style Sheets
  • HTML 태그에 옷(=디자인)을 입혀주는 기법
  • 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다.

2. HTML 문서에CSS를 적용하는 방법

  • CSS는 HTML 문서 내의 어느 위치에나 올 수 있지만, 일반적으로 태그 안에 위치한다.

3. 외부 파일 참조 방법

- CSS코드를 별도의 외부 소스파일에 작성해 두고 HTML에서 해당 파일을 참조하는 방법 - 이 방법은 한번 작성한 코드를 여러 페이지에서 재사용 할 수 있다는 장점이 있지만, CSS에 문제가 생길경우 해당 파일을 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 있다.

4. HTML 태그에 style 속성을 사용하는 방법

- 이 방법은 세밀한 조정이 가능하다. - 전체적으로 소스코드 양이 지나치게 많아지고, 유지보수가 쉽지 않다.

5. CSS코드를 작성하는 기본 형식

selector {
속성1: 값, 속성2: 값, ....
}

  • selector는 {..} 범위 안에 기술된 CSS 구문이 적용될 대상을 의미한다.
  • 속성의 이름은 실제 처리할 그래픽적인 속성으로, 폰트, 문단, 크기, 위치, 색상 등을 지정하며, 값은 해당 속성에 적용할 내용이다.
  • 이러한 구조로 HTML페이지의 특정 부분이나 여러 개의 요소를 selector로 지정하고 모양을 기술하는 것이 CSS의 표현 방식이다.

6. 기본 셀렉터의 종류

  • CSS 에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그이름, 클래스속성, id 속성에 대한 명시가 있다.

6-1. 태그이름

  • selector {...CSS본문...}
  • 특정 태그를 가리킨다. HTML 내에 동일 태그가 존재할 경우 모든 태그요소를 일괄 처리한다.

6-2. 클래스

  • . elector{...CSS본문..}
  • 셀렉터 이름 앞에 점 ( . ) 을 붙여 표시하고 HTML태그의 class속성에 점을 제외한 이름을 명시하여 지정한다.
  • 태그의 종류를 가리지않고 여러 요소에 복수 지정 가능하다.
  • 재사용의 목적

6-3. id

  • #selector {..본문..}
  • 셀렉터 이름 앞에 #을 붙여 HTML 태그의 id속성에 #을 제외한 이름을 명시하여 지정한다.
  • id 속성의 값은 HTML 페이지 내에서 중복 사용될 수 없다.

6-4. 조합형 셀렉터

  • tag.class{..CSS속성...}
  • tag#id {...CSS속성...}
  • id값으나 class 값을 태그 이름과 함께 명시하여 적용하는 형태
  • 셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
  • 태그, 클래스, 아이디를 독립적으로 명시할 때보다 우선적으로 적용된다.

7. AND의 의미를 갖는 콤마(,) 사용하기

selector1, selector2, ..., selector n{
... CSS 적용 ...
}

  • 여러 개의 요소에 동일한 CSS내용을 적용하기 위해 셀렉터를 콤마(,)로 구분하여 일괄 처리 할 수 있다.
  • 태그, class ,id 등 모든 형태의 CSS셀렉터가 가능하다.

8. 가상클래스

  • HTML 태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS셀렉터
  • 가상 클래스는 CSS의 셀렉터 이름뒤에 ":상황" 의 형식으로 명시한다.

9. 복잡한 형태의 셀렉터

  • 자식 셀렉터 -> ">" 로 구분하기
  • 자손 셀렉터 -> 공백("") 으로 구분하기
  • 속성 셀렉터 -> HTML 태그의 속성에 따른 구분

9-1. 자식셀렉터

  • ">"로 구분한 구조적 표현

  • 는 HTML의 계층 구조의 표현을 의미한다.

  • A > B일 경우 B의 요소는 반드시 A의 1depth 안에 존재해야 한다.

9-2. 자손셀렉터

  • 공백으로 구분하여 태그의 구조를 표현
  • 자식 셀렉터가 반드시 1depth안에 존재해야 했다면, 자손셀렉터는 depth를 제한하지 않는다.
  • 명시 과정에서 중간 단계를 생략해도 된다. 몇 depth를 더 내려가던 지정한 태그 의 범위안에 존재하기만 하면 된다.

9-3. 속성 셀렉터

  • 태그의 속성에 따른 표현
  • 스타일시트의 셀렉터가 정용되는 대상에게 특정 속성이 있는지
    여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태그 요소를 좀더 구체적으로 가리킬 수 있다.

10. text-align

  • left
  • right
  • center
  • justify

11.text-shadow

  • 글자에 그림자를 추가하는 속석
  • 셀렉터 {
    text-shadow : x-offset y-offset blur-radius color;
    }

12. 박스

  • 가로축 : 부모를 가득 채운다
  • 세로축 : 자신이 포함하고 있는 내용만큼 설정된다.

12-1. 박스의 크기를 구성하는 속성의 종류

  • width : 가로
  • height : 세로
  • border : 박스테두리
  • padding : 테두리와 내용영역 사이의 여백 / 여백 사이즈에 대한 px단위

12-2. padding 속성

  • 값의 지정 형식
  • 1개의 값
    ->
  • 2개의 값
    -> 공백으로 구분하여 2개의 값을 지정할 경우 첫 번째 값은 "상/하", 두 번째 값은 "좌/우"로 지정된다.
  • 4개의 값
    -> 곱개으로 구분하여 4개의 값을 지정할 경우 첫번째 값이 상단여백, 그후 우측, 하단, 왼쪽의 순서로 시계방향으로 적용된다.

13. 상속

  • 상속은 부모 엘리먼트의 속성을 가진 자식 엘리먼트가 물려받는 것을 의미합니다.
    상속은 CSS에서 생산성을 높이기 위한 중요한 기능이다.

14. 포지션

  • 엘리먼트 위치를 지정하는 4가지 방법
  • static
  • relative
  • absolute
  • fixed
  • bottom vs top : top 이 우선
  • right vs left : left가 우선
  • css각각의 엘리먼트는 각각의 위치가 정적으로 존재한다.
    즉 static 하게 위치 하게 된다. 여기서 me 기준으로 부모 엘리먼트 안에 존재해야 하기 때문에 left, top 등등의 옵션이 무시된다.
  • position 을 static이 아닌 relative로 바꿔야 한다.
profile
JTH
//
이전 포스트

day HTML CSS 03

다음 포스트

day HTML 05

0개의 댓글