<![CDATA[
<div class="figure-file" data-ke-type="file" data-file-src="https://t1.daumcdn.net/cafeattach/1KsGR/a1d4e0fd9c4373be4f8d8466f4a0f9f3ad067f4a?download" data-file-name="01.zip" data-file-size="5465" data-mimetype="application/x-zip-compressed" data-ke-align="alignCenter"><a href="javascript:checkVirus('grpid%3D1KsGR%26fldid%3DWq9T%26dataid%3D5%26fileid%3D1%26regdt%3D20260304175836&url=https%3A%2F%2Ft1.daumcdn.net%2Fcafeattach%2F1KsGR%2Fa1d4e0fd9c4373be4f8d8466f4a0f9f3ad067f4a')"><div class="image"></div><div class="desc"><div class="filename"><span class="name">01</span><span class="type">.zip</span></div><div class="size">5.34KB</div></div></a></div><p>CSS(Cascading Style Sheets) <br>CSS란 documents가 사용자에게 어떻게 보여질까를 기술하는 언어입니다. HTML이 정보를 표현한다면, CSS는 HTML문서를 시각적으로 예쁘게 꾸며주는 역할을 합니다. <br><br>CSS의 장점 <br>1. 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있습니다. <br>2. 검색엔진이 HTML을 해석 가능하게 하여 더 많은 방문자들이 방문할 수 있도록 유도할 수 있습니다. <br>    - 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석할 수 있도록 할 수 있습니다.(웹 접근성) <br><br>CSS 문법 <br>HTML 문서 <head> 요소 안에 <style> ~ </style>에 CSS 문법을 작성합니다. <br><br>선택자 { 속성명: 속성값; 속성명: 속성값 ... } <br><br>    p       { text-align: center; color: blue; } <br>--------    ------------------------------------ <br>  선택자                    선언부 <br><br>* CSS의 문법은 선택자와 선언부로 구성됩니다. 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킵니다. 선언부는 하나이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({})를 사용하여 전체를 둘러쌉니다. <br><br><br>CSS의 주석 <br>/* */ 사이에 내용을 입력합니다. (여러줄, 한줄 모두 가능) <br>p { text-align: center; color: blue; } /* p요소를 가운데 정렬, 글자 색상을 파란색으로 적용 */ <br><br><br>CSS를 적용하는 방법 <br>1. 인라인 스타일 : HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다. 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다. <br><br><p style="text-align: center; color: blue;">안녕하세요.</p> <br><p>반갑습니다.</p> <br><br>2. 내부 스타일 : 내부 스타일을 이용하는 방법은 HTML 문서의 <head> 요소에 <style> 요소를 사용하여 CSS 스타일을 적용하는 방법입니다. 내부 스타일은 해당 HTML 문서에만 적용할 수 있습니다. <br><br><head> <br>    <meta charset="UTF-8"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>    <title>CSS란?</title> <br>    <style> <br>        h2 { text-align: center; font-size: 50px; } /* 일반 텍스트는 16px입니다. */ <br>        p { text-align: center; color: deeppink; } <br>    </style> <br></head> <br><br><br>3. 외부 스타일 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있습니다. 외부에 작성된 스타일 시트 파일은 .css 확장명을 사용하여 저장합니다. 스타일을 적용할 페이지 <head> 요소에 <link> 요소를 사용하여 외부 스타일시트를 포함해야만 스타일이 적용됩니다. <br><br>style.css 파일 내부에 <br>        h2 { text-align: center; font-size: 50px; } /* 일반 텍스트는 16px입니다. */ <br>        p { text-align: center; color: deeppink; } <br><br>html 파일 내부에 <br>    <head> <br>        <link href="style.css" rel="stylesheet" type="text/css"> <br>    </head> <br><br><br><br>CSS 선택자 <br><br>1. 전체 선택자(*) <br>스타일을 모든 요소에 적용할 때 사용합니다. 전체 선택자는 한 번에 많은 요소를 선택하고 한꺼번에 스타일을 적용하기 위해 사용합니다. <br><br>* { padding: 0; margin: 0; } <br><br><br>2. 요소 선택자 <br>특정 요소가 쓰인 모든 요소에 스타일을 적용합니다. <br><br>h2 { color: orange; } <br><br>* 상속 : 부모 요소의 속성 값이 자식 요소에게 적용되는 속성입니다. <br><br><br>3. id 선택자(#) <br>아이디 선택자는 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용합니다. # 기호를 사용하여 id 속성을 가진 요소에 스타일을 지정합니다. <br><br><h2 id="hello">안녕하세요.</h2> <br><br>#hello { color: red;} /* 요소에 관계없이 id hello인 요소를 선택합니다. */ <br>h2#hello { color: red;} /* h2 요소에 id가 hello인 요소를 선택합니다. */ <br><br><br>4. class 선택자(.) <br>클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 특정 집단을 클래스라고 하여 .(점)기호를 사용하여 같은 클래스 이름을 가지는 요소들을 모두 선택해줍니다. <br><br><h2 class="hello">안녕하세요.</h2> <br>... <br><p class="hello">반갑습니다.</p> <br><br>.hello { color: red; }  /* 요소에 관계없이 class가 hello 요소를 선택합니다. */ <br>p.hello { color: blue} /* p 요소에 class가 hello인 요소를 선택합니다. */ <br>.hi { text-align: center; } /* 요소에 관계없이 class와 hi인 요소를 선택합니다. */ <br><br>* <h2 class="hello hi">안녕하세요.</h2> /* hello class와 hi class 모두 적용 */ <br><br><br>5. 그룹 선택자 <br>그룹 선택자는 여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 한번에 정의해줍니다. <br><br>h2, p {text-align: center; } <br><br><br>6. 하위 선택자(자손) <br>조상의 요소 하위의 모든 요소를 선택합니다. <br><br>ul a { text-decoration: none; } /* ul 요소의 자손 요소 a 요소의 밑줄을 제거 */ <br><br><body> <br>    <h2>하위 선택자</h2> <br>    <ul> <br>        <a href="<a href="https://www.naver.com" target="_blank" class="ke-link">https://www.naver.com</a>">네이버</a> <br>        <li> <br>            <a href="<a href="https://www.google.com" target="_blank" class="ke-link">https://www.google.com</a>">구글</a> <br>        </li> <br>        <li> <br>            <p>다음</p> <br>        </li> <br>        <li> <br>            <a href="<a href="http://www.nate.com" target="_blank" class="ke-link">http://www.nate.com</a>">네이트</a> <br>        </li> <br>    </ul> <br></body> <br><br>* 자식은 자손에 포함됩니다. <br><br>                                            <body> <br><br>                        <h2>                                    <ul> <br><br>                     하위 선택자                    <a>     <li>        <li>        <li> <br><br>                                                  네이버     <a>        <p>         <a> <br><br>                                                            구글        다음        네이트 <br><br><br>7. 자식 선택자 <br>부모의 요소 하위의 모든 자식을 선택하는 선택자입니다. <br><br>ul > a { text-decoration: none } /* ul 요소의 자식 요소 a 요소의 밑줄을 제거 */ <br><br><br>8. 인접 형제 선택자 <br>동일한 부모의 요소를 갖는 자식 요소들의 관계입니다. 선후 관계는 형-동생의 관계이고 이는 "먼저 나온 요소 - 나중 나온 요소"를 의미합니다. <br><br>a + li { color: red; }  /* a 요소의 형제 중 바로 다음에 위치한 동생 요소가 li 요소인 경우 선택 */ <br><br><br>9. 일반 형제 선택자 <br>형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소를 선택하겠다라는 의미입니다. <br><br>a ~ li { color: red; } /* a 요소의 형제 중 다음에 위치한 동생 li 요소를 모두 선택 */</p>
<!-- -->
]]>
카페 게시글
웹퍼블리싱
01_CSS(선택자)
삐돌이
추천 0
조회 26
26.03.04 17:58
댓글 0
다음검색
