2023.03.27 월 (CSS)

프론트엔드웹디자인 4주차 1차시 강의내용

 

html파일에 css를 넣는 곳은 두 가지로 나눌 수 있다.

1. 외부 (External)

2. 내부 (Internal)

 

 

외부 방식은 css 파일을 별도로 만들어서 적용하는 형식이다.

 

Internal은 다시 두 개로 나뉜다.

1. style이라는 태그속에 css 구문을 넣는 것

2. 각 태그의 시작에 style을 속성으로 넣는 것(inline)

 

세 가지 방식 모두 섞어서 사용하지만, 기본적인 방법은 External이다.

 

외부 (External)

 - External을 연결할 때는 link라는 속성을 이용한다.

<link href = "a.css" rel = "stylesheet">을 헤드 안에 넣어주면 됨.

 - 같은 테마를 사용하는 여러 페이지를 관리하기 용이하다.

 

 

style 적용 순서는 위에서부터 내려오면서 스타일을 받기 때문에, 위에 있는 것이 아래에 있는 것보다 우선순위가 떨어진다.

따라서 보통은 link를 style보다 위에 둔다.

 

 

CSS Rule (css 구문 형식)

h1 { font-size : 36px;
     color : blue;
    }

 - 여기에서 h1을 selector이라고 부른다. 스타일이 적용될 대상을 의미한다. (h1, h2)처럼 나열도 가능하다.

 - {   } 중괄호 안에 쌓여있는 것들은 목록이라 한다.

 - 하나 하나의 목록들을 Properties라고 한다. (대상에다가 어떤 스타일을 줄 것인지 의미)

 - 콜론을 중심으로 왼쪽에 있는 것은 name, 오른쪽에 있는 것은 value가 된다.

 - 하나의 Properties가 끝날 때마다 세미콜론을 적어주어야 한다.

 

 - blue 위치에는 색상이름 혹은 RGB값이 들어갈 수 있다. RGB 값을 표현하는 방법은 아래와 같다

1.  color: rgb(20, 80, 180);

2. color: #FF00FF  (16진수)

 

 

 

 

id, class

<h1 id = “title”>welcome</h1> 처럼 작성했을 때, 셀렉터에다가 #title이라고 쓰고 원하는 스타일을 지정해줄 수 있다.

 

<h1 class=“subtext”>Design</h1> 처럼 작성했을 때, 셀렉터에다가 .subtext라고 쓰고 원하는 스타일을 지정해줄 수 있다.

 

id와 class의 차이점

1. id는 문서 내 무조건 하나만 있어야 하지만, class는 여기저기 있어도 된다.

 

class를 한 번만 사용하면 id와 결과가 동일하기 때문에, class를 사용하는 것이 권장된다.

 

 

 

선택자 중에는 p > strong가 있는데,

p 안에있는 strong이라는 엘리먼트에게 스타일을 주는 것이다.

 

> 을 사용하여 내가 원하는 특정 엘리먼트, 특정 영역을 지정할 수 있다.

 

 

 

div 엘리먼트

역할 : 엘리먼트들의 그룹 생성

        <style>
            body {
                /* Jello Style 기법 화면상 가운데에 나타나게 해라 */
                width: 940px;
                margin-left:auto;
                margin-right: auto;
                font-size: small;
                text-align: center; /* 정렬 */
                line-height: 1.5em; /* 현재 줄 간격의 1.5배 */
                font-family: sans-serif;
            }
            
            .main {
                width: 69%;  /* 기준은 div의 부모 엘리먼트인 body의 가로크기의 69%를 의미 */
                margin-left:auto;
                margin-right: auto;
                padding-top: 40px;
                padding-bottom: 40px;
            }
            
            #hobby {
                color: rgb(20, 80, 180);
                font-size: 120%; /* 현재 크기의 120% */
                font-weight: normal; /* 기본값인 진한 글씨를 일반 글씨로 변경 */
            }
            
            #hobby, #title {
                    font-family:serif; /*명조체, 산 세리프틑 고딕체 웹페이지는 고딕체가 기본*/
                    margin-top: 0;
                    margin-bottom:0;
            }
            .magazine {
                font-size: 110%;
                font-weight: normal;
                margin-top: 8px;
                margin-bottom: 8px;
            }
            
            p ,ol {
                text-align: justify; /* 양쪽 정렬 */    
            }
            
            .caption {
                border-left: 3px solid blueviolet;
                margin-top: 0;
                padding-left: 5px;
                text-align: left;
            }
            
            h3 {
                margin-top:30px;
                border-top:2px solid black; /*선은 borderㄹ 만ㄷㄹ면됨*/
                padding-top:10px;
                text-align: left;
            }
        </style>