-
CSS 셀렉터 기본개념 실습해보기[ DEV ] Frontend/HTML , CSS 2023. 1. 10. 16:25
So 밋밋한 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>기본 셀렉터 연습!</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>상반기에 할 일</h1> <h2>취업에 필요한 것은?</h2> <ul> <li>기술력 - 현재 얼마나 준비가 되었나?</li> <li>성장성 - 앞으로 더욱 발전할 수 있을까?</li> <li>팀워크 - 함께 일하기 좋은 사람인가?</li> </ul> <h2>그래서 갖춰야 할 것?</h2> <ul> <li>자소서 - 나를 회사에 파는 광고, 좋은 광고란?</li> <li>포틀폴리오 - 직접 만든 무언가,실제 좋은 물건인가?</li> <li>코딩테스트 - 직접적 실력 검증.</li> </ul> <h2>자격증은 준비해야하나?</h2> <p>굳이 필요없다. 단, 명시할 경우 준비하기.</p> </body> </html>
우선 link 태그를 이용해서 css 를 사용할 준비를 해보자!
<link rel="stylesheet" href="style.css">이제 style.css 파일을 만들어서 html을 꾸며보자!
잠깐!
selector 는 이렇게 사용하면 된다.
기본 셀렉터에 대해서는 아래 링크에다 정리해두었다.
https://ssoontory.tistory.com/151
CSS 셀렉터
💡 Selector란? HTML 문서를 꾸미기 위해 어딜 꾸밀지 선택하는 것. CSS 를 연결하기 위해서는 title 아래 줄에다가 아래 코드를 입력해주면 된다. link 태그를 이용해서 css를 연결시켜주면 된다! 💡기
ssoontory.tistory.com
우선적으로 태그 셀렉터로 body의 폰트를 변경해보자!
body{ font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; }짠! body 태그로 전체 글꼴을 바꿔줬다.
다음은 클래스 셀렉터를 이용해보자.
그 전에 내가 목록에 적어둔 것들에 클래스를 적용해서 우선순위를 만들어주자.
기술력과 포폴에 main 클래스를 부여했다.
이제 클래스 셀렉터를 활용해서 이를 강조해보자.
<h1>상반기에 할 일</h1> <h2>취업에 필요한 것은?</h2> <ul> <li class ="main">기술력 - 현재 얼마나 준비가 되었나?</li> <li>성장성 - 앞으로 더욱 발전할 수 있을까?</li> <li>팀워크 - 함께 일하기 좋은 사람인가?</li> </ul> <h2>그래서 갖춰야 할 것?</h2> <ul> <li>자소서 - 나를 회사에 파는 광고, 좋은 광고란?</li> <li class ="main">포틀폴리오 - 직접 만든 무언가,실제 좋은 물건인가?</li> <li>코딩테스트 - 직접적 실력 검증.</li> </ul>클래스 셀렉터
. class
.main{ color:rebeccapurple; }
이참에 서브 클래스를 더 만들어서 2순위도 표시해보자.
<h1>상반기에 할 일</h1> <h2>취업에 필요한 것은?</h2> <ul> <li class ="main">기술력 - 현재 얼마나 준비가 되었나?</li> <li>성장성 - 앞으로 더욱 발전할 수 있을까?</li> <li class ="sub">팀워크 - 함께 일하기 좋은 사람인가?</li> </ul> <h2>그래서 갖춰야 할 것?</h2> <ul> <li>자소서 - 나를 회사에 파는 광고, 좋은 광고란?</li> <li class ="main">포틀폴리오 - 직접 만든 무언가,실제 좋은 물건인가?</li> <li class ="sub">코딩테스트 - 직접적 실력 검증.</li> </ul>.sub{ color:skyblue }
마지막으로 id Selector를 이용해서 효과를 넣어보자.
span 태그를 이용해서 id를 지정해준다.
💡 <span> 태그
- <span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않는다.
<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데,
<div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않다는 점이다.
사용법
<span>내용</span>
https://ofcourse.kr/html-course/span-태그
HTML <span> 태그 - ofcourse
개요 태그는 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다. 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다.
ofcourse.kr
<h2>자격증은 준비해야하나?</h2> <p>굳이 <span id="useless" >필요없다.</span> 단, 명시할 경우 준비하기.</p>/*id 셀렉터*/ #useless { color : red; }
https://www.youtube.com/watch?v=W_9E8lyZIbU&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=11
'[ DEV ] Frontend > HTML , CSS' 카테고리의 다른 글
CSS dinner 게임 답안 및 설명 [1번 ~12번] (0) 2023.01.10 CSS 복합 셀렉터 연습하기 ( *, 내부 선택자, 동시 선택자, 상태별 선택자) (0) 2023.01.10 CSS 셀렉터 (0) 2023.01.10 입력 폼 만들기 (더 추가할 예정) (0) 2023.01.09 기본 태그를 이용해서 가고 싶은 여행지 말해보기 (0) 2023.01.09