[43일차] 국비 교육

Notice

Recent Posts

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
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

Tags more

Archives

Today

Total

관리 메뉴

정리정돈 개발블로그~

[43일차] 국비 교육 본문

국비학원 교육 일지

[43일차] 국비 교육

snooop 2022. 9. 20. 17:39

<css의 기본>

html이 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할
css는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당
상속 받고 재정의 하면 그게 우선시 됨
스타일 시트 : 스타일 규칙을 한눈에 확인하고 필요할때마나 수정하기가 쉽도록 한군데 묶어 놓은 것
브라우저 기본 스타일은 다 다른게 보이기 때문에 잘 사용하지 않음
->기본 마진이 들어가 있음

<문법 형식>

css 문법은 크게 선택자와 선언부로 구분

선택자 : css 스타일을 적용할 html 태그 요소

선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ol>
        <li id="special">First</li>
        <li>Second</li>
    </ol>
    <h1 id = "special">Hello</h1>

    <div class="red"></div>
    <div class="blue"></div>
    <button>Button 1</button>
    <button>Button 2</button>
    <a href="kakao.com">카카오</a>
    <a href="google.co.kr">구글</a>       
</body>
</html>

<css>

li{
    color : blue;
}
#special{
    color : pink;
}
.red{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}
button:hover{
    background-color :purple;
    color : white;
}
button:active{
    background-color:royalblue;
    color : white;
}
a[href$=".com"]{
    color : blueviolet;

}
h1{
    padding : 10px;
    background-color: #222;
    color: #fff;
}
p{
    color : orangered;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 외부 스타일 시트 적용 -->
<link rel="stylesheet" href="style.css">
    <!-- 내부 스타일 시트 적용 -->
    <style>
        p{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <!-- 인라인 스타일 -->
    <h1 style="color:red; font-size: 32px;">레드향</h1>
    <p>껍질이 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배해서 만들었다.</p>
</body>
</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="style2.css">
</head>
<body>
    <!-- 클래스 안에 두개 스타일을 넣을 수 있음 -->
    <p>선택자 연습 입니다.</p> 
    <p class="accent bg">클래스 선택자(accent) 입니다.</p>
    <p class="bg"> 클래스 선택자(bg)입니다.</p>
</body>
</html>

<css>

/* 전체 선택자 : 모든 요소를 한번에 선택자로 지정하는 방법 */
*{
    color : red;
}
/* 태그 선택자 : 태그명으로 선택자를 지정하는 방법 */
div{
    width : 200px;
    height : 200px;
    background-color: royalblue;
    color : white;
}
p{
    font-style: italic;
}
/* 클래스 선택자 : . 클래스명 {스타일 규칙} */

.accent{
    border : 1px solid #000;
    padding : 5px;   
}
.bg{
    background-color: #ddd;
}


/* 아이디 선택자 : id속성값을 이용해 선택자를 지정하는 방법  */
/* 속성값 앞에 #기호를 붙입니다. */
/* 클래스 선택자는 문서에서 여러번 적용 할 수 있는 반면에 id 선택자는 문서에서 한번만 적용(유일해야함) */
#container{
    width: 500px;
    margin : 10px auto; /* 테두리의 바깥 여백*/ 
    padding : 10px; /* 테두리의 안쪽 여백 */
    border: 1px solid #000; /* 테두리 라인 지정*/
}
/* 기본 속성 선택자 : 속성과 값을 사용해 선택자를 지정하는 방법 */
a[target="_self"]{
    color : blue;
}

/* 조합 선택자 : 기본 선택자에 여러가지 조합을 추가해 선택자를 사용하는 방법 */
/* 콤마로 구분해 여러가지 선택자를 한꺼번에 사용 */
p, #title, .red{   
    color : orangered;
}
/* 자식 선택자 : 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할때 사용 */
/* 부모 선택자 > 자식 선택자 { css 코드 작성 }*/
.box > p{
    background-color: blanchedalmond;
} 
/* 잘 사용하지 않음 */
/* 인접 형제 선택자 : 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정*/
/* 이전 선택자 + 대상 선택자 { CSS 코드 작성} */
h1 + h2 {
    background-color: cadetblue;
}
/* 잘 사용하지 않음 */
/* 일반 형제 선택자 : 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정 */
/* 이전 선택자 ~ 대상 선택자 {CSS 코드 작성 } */
h1 ~ h3 {
    background-color: chocolate;
}
/* 가상 요소 선택자 : HTML에 구성되어 있지 않지만 마치 존재하는 것처럼 취급해 선택하는 선택자 */
p::before{
    content: '@@';
}
p::after{
    content: '^^';
}

/* **중요한 부분** */
/* 가상 클래스 선택자 > 링크 가상 선택자 : 링크 상태를 이용해 선택하는 방법입니다. */
/* 기준 요소 : 가상 클래스 선택자 { CSS 코드 작성 } */
/* :link 한번도 방문하지 않은 링크일 때 선택 */
/* :visited 한번이라도 방문한 적이 있는 링크일 때 선택 */
a:link{
    color : orange;
}
a:visited{
    color : green;
}
/* 동적 가상 선택자 : 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택 */
/* :hover 요소에 마우스를 올리면 해당 태그가 선택됨 */
/* :active 요소를 마우스 클릭하고 있는 동안 태그가 선택됨 */
button{
    width: 150px;
    height: 80px;
    background-color: orange;
    transition: 1s .5s; /* 지속 시간과 대기 시간 */ 
}
button:hover{
    width : 180px;
    height : 100px;
    background-color: red;
}
button:active{
    width: 180px;
    height : 100px;
    background-color: brown;
}
/* 입력 요소 가상 클래스 선택자 : 입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법 */
/* :focus 입력 요소에 커서가 활성화되면 선택자로 지정 */
/* :checked 체크표시가 있으면 선택자로 지정 */
/* :disabled 요소가 비활성화되면 선택자로 지정 */
/* :enabled 요소가 활성화되면 선택자로 지정 */
input:checked{
    color : darkblue;
    background-color: chartreuse;
}

<!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="style.css">
</head>
<body>
    <div id="container">
        <h1 class="accent bg">레드향</h1>
        <p>껍질이 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불립니다.</p>
        <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 풍부합니다.</p>
        <p>비타민 C와 비타민 p가  풍부해 혈액 순환, 감기 예방 등에 좋습니다.</p>
    </div>
    <a href="http://google.co.kr" target="_blank">구글</a>
    <a href="http://kakao.com" target="_self">카카오</a>
    <a href="http://clien.net">클리앙</a>

    <div class = "box">
        <p>사과</p>
        <p>오렌지</p>
        <p>레드향</p>
        <p>수박</p>
        <span>딸기</span>
    </div>
    <div>
        <h1>제목 입니다.</h1>
        <h3>중간 제목 입니다.</h3>
        <h3>작은 제목 입니다.</h3>
    </div>
    <label for="id">입력창</label>
    <input type="checkbox" id="id" autofocus>
    <div>
        <button>확인</button>
        <button>취소</button>
    </div>
</body>
</html>

/* 구조적 가상 클래스 선택자 : 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 선택 */
/* E:first-child 첫번째 자식 요소를 선택 */
/* E:last-child 마지막 자식 요소를 선택 */
/* E:nth-child(n) n번째 자식 요소를 선택 */
/* E:nth-last-child(n) 뒤에서부터 n번째 자식 요소 선택 */
/* :nth-of-type(n) 부모 요소의 자식 중 n번째 */
/* li:first-child{
    color: black;
}
li:last-child{
    color: green;
} */

/* p:nth-child(1){
    color : blue;
} */

/* 중간에 다른 태그가 섞에 있다면 p태그 기준으로 찾아줌 */
p:nth-of-type(2){
    color:green;
}
div.box {
    background-color: black;
}
section#main{
    background-color: chartreuse;
}
div:hover > button {
    background-color: blue;
}
a[target="_blank"]{
    background-color: yellow;
    border: 1px solid #ccc;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div>
        <p>p 태그 첫번째 요소 입니다.</p>
        <span>span 태그 첫번째 요소 입니다.</span>
        <p>p 태그 두번째 요소 입니다.</p>
        <p>p 태그 세번째 요소 입니다.</p>
    </div>
    
</body>
</html>

/* 구조적 가상 클래스 선택자 : 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 선택 */
/* E:first-child 첫번째 자식 요소를 선택 */
/* E:last-child 마지막 자식 요소를 선택 */
/* E:nth-child(n) n번째 자식 요소를 선택 
                 중간에 다른 태그가 들어오면 찾지 못함*/
                 /* list에서 몇번째에서 인가로 자주 사용 */
/* E:nth-last-child(n) 뒤에서부터 n번째 자식 요소 선택 */
/* :nth-of-type(n) 부모 요소의 자식 중 n번째 */

p:nth-of-type(2){
    color:blue;
}
/* 같은 타입만 검사 */

<css 필수 속성 다루기>

css의 특징 : 적용우선순위 - 인라인 스타일이 제일 우선

상속 - 부모요소에 적용된 스타일을 자식 요소가 물려 받는 것

단위 - 절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위 ex)px

상대 단위 : % 단위는 부모요소의 속성값에 대한 상대적인 크기

em 단위는 부모요소의 텍스트 크기를 기준으로 상대적인 크기를 가짐

rem 단위는 최상위부모(html)의 텍스트 크기에 대한 상대적인 크기

vw 단위는 뷰포트 너비의 1/100, vh는 뷰포트 높이 1/100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="parent">
        <p>부모의 폰트 사이즈입니다.</p>
    </div>
    <div class="child">
        <p>자식의 폰트 사이즈입니다.</p>
    </div>
    <div class="child-to-child">
        <p>자식의 자식의 폰트 사이즈입니다.</p>
    </div>
</body>
</html>

.parent{
    font-size : 18px;
}
.child{
    font-size : 2em;
}
.child-to-child{
    font-size : 2rem;
} 
/* html 폰트사이즈는 16px이므로 부모 폰트 16px이면 똑같이 보임 */
/* 900px보다 작으면 모바일로 간주  */

<font-family 속성>

-글꼴을 지정할 수 있음

<font-weight 속성>

-normal : 400과 같은 굵기

-bold : 700과 같은 굵기

-lighter : 부모 요소보다 얇게 지정되는 상대적인 값

-bolder : 부모 요소보다 굵게 지정되는 상대적인 값

<font-style 속성>

= font-style:<속성값>;

normal : 기본 형태로 표시

italic : 이탤릭체로 표시

<text-decoration 속성>

=text-decoration:<속성값>;

none: 텍스트 장식을 모두 지움

line- through : 텍스트 중간을 관통하는 선을 긋습니다.

overline: 텍스트 위에 선을 긋습니다.

underline : 텍스트 아래에 선을 긋습니다.

body{
    font-family: "맑은 고딕", "Nanum GOthic", sans-serif;
}

.parent{
    font-size : 16px;
    color : #4169e1;
    font-weight: 400;
    text-align: justify;
    text-decoration: underline;
}

.child{
    font-size: 1.5em;
    font-weight : 900;
    color : rgba(0,0,255, .1);
    background-image: url("/images/healing.jpg");


}
.child:hover{
    color : rgba(0, 0, 255, 1);
}

.child-to-child{
    font-size: 1.2em;
    color: #232323;
} 

/* 영문 텍스트를 작은 대문자로 변경 */
.variant {
    font-variant : small-caps;
}

a{
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="parent">
        <p>부모의 폰트 사이즈입니다.</p>
        <div class="child">
        <p>자식의 폰트 사이즈입니다.</p>
            <div class="child-to-child">
        <p>자식의 자식의 폰트 사이즈입니다.</p>
            </div>
        </div>
        <h1>HTML에서 제일 큰 글자 입니다.</h1>
        <h2>Success usally come to those who are too busy to be looking for it.</h2>
        <a href="http://google.co.kr">구글 사이트 이동</a>
    </div>
</body>
</html>

'국비학원 교육 일지' 카테고리의 다른 글

[45일차] 국비교육 (1)	2022.09.22
[44일차] 국비 교육 (1)	2022.09.21
[42일차] 국비 교육 (1)	2022.09.19
[41일차] 국비교육 (0)	2022.09.16
[40일차] 국비 교육 (0)	2022.09.15

'국비학원 교육 일지' Related Articles

정리정돈 개발블로그~

[43일차] 국비 교육 본문

[43일차] 국비 교육

<css의 기본>

<문법 형식>

'국비학원 교육 일지' 카테고리의 다른 글

티스토리툴바