🍁CSS 문법
선택자 { 속성명: 값; }선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}선택자 {
속성명: 값;
}선택자 {
속성명: 값;
속성명: 값;
속성명: 값;
}CSS 문법으로 위의 틀을 사용한다.
선택자와 값의 속성을 변경하면서 사용하며, 이때 속성은 늘어날 수 있다.
문장 종결자가 있기 때문에 블럭 내에서 자유롭게 작성한다.
CSS의 표기법
[Java] 변수 명명법 패턴: 파스칼 표기법, 캐멀 표기법, 스네이크 표기법, 케밥 표기법, 헝가리언
변수명, 클래스명, 메소드명 등의 이름을 다음과 같이 지었더니 좀 더 관리하기 쉽다는 장점이 있어 공식화 되었다. 변수 명명법 패턴은 관습적이긴 하지만, 큰 개발 환경에서는 규칙을 따르지
isaac-christian.tistory.com
<h1 id="main-title">회사 소개</h1>CSS에서는 "main-title"과 같이 케밥 표기법을 사용한다.
🍁선택자
1. 전체 선택자: * {}
2. 태그 선택자: tag {}
3. ID 선택자: #id {}
4. class 선택자: .class {}
5. 그룹 선택자: sel1, sel2, sel3 {}
6. 자식 선택자: parent > child {}
7. 자손 선택자: parent child {}
8. 인접 형제 선택자: sel1 + sel2 {}
9. 형제 선택자: sel1 ~ sel2 {}
🍁CSS Selector (CSS 선택자)
CSS 선택자는 HTML 소스(문서) 상에서 태그를 검색하는 도구이다.
검색을 하는 이유는 태그 검색 후 서식을 적용하기 위해서이다.
전체 선택자
전체 선택자는 모든 태그를 선택하여 서식을 적용한다.
<style>
/* 전체 선택자 */
* {
color: blue;
}
</style>
태그 선택자
태그 선택자는 태그명을 가지고 원하는 태그를 선택한다.
같은 태그에 대해서 서식을 일괄 적용하므로 생산성과 유지보수성 면에서 장점이자 단점이 된다.
예로 들어 태그 선택자로 <p> 태그의 서식을 적용하면 모든 <p> 태그의 서식이 적용된다.
이에 대한 해결책이 있지만, 태그 선택자로서만 보면 내가 원하는 영역의 선택이 불가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 태그 선택자 */
p {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<h1>h1 입니다.</h1>
<p>p 입니다.</p>
<p>p 입니다.</p>
<p>p 입니다.</p>
<div>div 입니다.</div>
<div>div 입니다.</div>
<div>div 입니다.</div>
<h2>h2 입니다.</h2>
<p>p 입니다.</p>
<div>div 입니다.</div>
<ol>
<li>li 입니다.</li>
<li>li 입니다.</li>
<li>li 입니다.</li>
</ol>
<hr>
<h2>회사 소개</h2>
<p>오시는 길: 계단을 15,600개 올라오세요.</p>
</body>
</html>
ID 선택자
ID 선택자는 태그에 명시된 id 속성을 검색해서 태그를 선택한다.
원하는 태그를 직접 선택할 수 있지만, ID라는 특성 때문에 일괄 적용되지 않는다.
태그명#ID<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ID 선택자 */
h2#title {
color: blue;
}
p#address {
color: red;
}
</style>
</head>
<body>
<h1>h1 입니다.</h1>
<p>p 입니다.</p>
<p>p 입니다.</p>
<p>p 입니다.</p>
<div>div 입니다.</div>
<div>div 입니다.</div>
<div>div 입니다.</div>
<h2 id="title">h2 입니다.</h2>
<p>p 입니다.</p>
<div>div 입니다.</div>
<ol>
<li>li 입니다.</li>
<li>li 입니다.</li>
<li>li 입니다.</li>
</ol>
<hr>
<h2>회사 소개</h2>
<p>오시는 길: 계단을 15,600개 올라오세요.</p>
</body>
</html>ID 선택자를 사용하기 전에 내가 변경하고 싶은 태그를 찾아가서 id 속성을 부여해야 한다.
id는 자유롭게 무한정 만들어 낼 수 있으며, id에는 영어, 숫자, '-' 또는 '_' 만을 사용해야 한다.
또한 id는 숫자로는 시작할 수 없다.
id 사용시 주의사항
한 페이지에서 id 속성은 같은 값을 가질 수 없다.
이는 오라클로 치면 PK와도 같은 존재이다.
이렇게 된 순간부터 문서를 잘못 만든 것이다.
class 선택자
class 선택자는 태그에 명시된 class 속성을 검색해서 태그를 검색한다.
원하는 태그를 직접 선택할 수 있다.
태그명.class<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* class 선택자 */
div.txt {
color: pink;
}
</style>
</head>
<body>
<h1>h1 입니다.</h1>
<p>p 입니다.</p>
<p>p 입니다.</p>
<p>p 입니다.</p>
<div class="txt">div 입니다.</div>
<div class="txt">div 입니다.</div>
<div class="txt">div 입니다.</div>
<h2>h2 입니다.</h2>
<p>p 입니다.</p>
<div>div 입니다.</div>
<ol>
<li>li 입니다.</li>
<li>li 입니다.</li>
<li>li 입니다.</li>
</ol>
<hr>
<h2>회사 소개</h2>
<p>오시는 길: 계단을 15,600개 올라오세요.</p>
</body>
</html>
id는 단일 식별자이고, class는 그룹 식별자이다.
id와 class의 다른 점은 class는 여러 개에 동일한 값을 주는 게 가능하다는 점이다.
class 선택자의 활용
클래스 선택자의 점유율이 실무에서는 가장 높은 편인데, 그 이유는 적용하고 싶은 클래스를 연달아 적용할 수 있기 때문이다.
재사용하기 적당한 클래스를 만들어 놓으면 조합하여 여러가지 서식을 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one { color: blue; }
.two { text-decoration: underline; }
.three { font-style: italic; }
.four { color: blue; text-decoration: underline; }
.red { color: red; }
.blue { color: blue; }
.yellow { color: yellow; }
</style>
</head>
<body>
<p class="one">문단입니다.</p>
<p class="two red">문단입니다.</p>
<p class="three red">문단입니다.</p>
<p class="four">문단입니다.</p>
<p class="one two">문단입니다.</p>
</body>
</html>
위와 같이 조립하듯이 클래스 작업을 많이 하는 편이다.
CSS Selector의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 서식 변경 영역 -->
<h1>회사 소개</h1>
<h2>대표 이사</h2>
<p>아이작</p>
<p>인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<h2>기획 팀장</h2>
<p>소피아</p>
<p>인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<h2>운영 부장</h2>
<p>아브라함</p>
<p>인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<hr>
<!-- 서식 미변경 영역 -->
<h1>또 다른 제목</h1>
<h2>또 다른 부제목</h2>
<p>또 다른 컨텐츠</p>
</body>
</html>
회사 소개 영역만 서식을 바꾸고, 또 다른 제목 영역에는 서식을 바꾸지 않게 해 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1#main-title {
color: blue;
}
h2.sub-title {
color: green;
}
p.employee-name {
color: orange;
}
p.intro {
color: powderblue;
}
</style>
</head>
<body>
<!-- 서식 변경 영역 -->
<h1 id="main-title">회사 소개</h1>
<h2 class="sub-title">대표 이사</h2>
<p class="employee-name">아이작</p>
<p class="intro">인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<h2 class="sub-title">기획 팀장</h2>
<p class="employee-name">소피아</p>
<p class="intro">인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<h2 class="sub-title">운영 부장</h2>
<p class="employee-name">아브라함</p>
<p class="intro">인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<hr>
<!-- 서식 미변경 영역 -->
<h1>또 다른 제목</h1>
<h2>또 다른 부제목</h2>
<p>또 다른 컨텐츠</p>
</body>
</html>
그룹 선택자
그룹 선택자는 2개 이상의 선택자를 한 번에 선택하는 방법이다.
선택자, 선택자, 선택자 {
구현부
}h1#main-title, h2.sub-title, p.employee-name {
color: blue;
}
그룹 선택자는 종류에 상관없이 목록을 만들 수 있다.
🍁태그명 생략
태그명은 생략할 수 있으며, 태그명을 생략할 경우 모든 태그 중에 해당 아이디를 갖는 태그를 찾는다.
ID 선택자는 태그명을 생략한 것과 생략하지 않는 것이 같기 때문에 생략하는 편이다.
다만 class 선택자는 유일하지 않기 때문에 다른 태그가 같은 식별자를 가질 수 있으므로 태그명을 생략할 경우 주의해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main-title { /* 태그명 생략 */
color: blue;
}
h2.sub-title {
color: blue;
}
.employee-name { /* 태그명 생략 */
color: blue;
}
.intro { /* 태그명 생략 */
color: powderblue;
}
</style>
</head>
<body>
<!-- 서식 변경 영역 -->
<h1 id="main-title">회사 소개</h1>
<h3 class="sub-title">소제목입니다.</h3>
<h2 class="sub-title">대표 이사</h2>
<p class="employee-name">아이작</p>
<p class="intro">인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<h2 class="sub-title">기획 팀장</h2>
<p class="employee-name">소피아</p>
<p class="intro">인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<h2 class="sub-title">운영 부장</h2>
<p class="employee-name">아브라함</p>
<p class="intro">인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말 인사말</p>
<hr>
<!-- 서식 미변경 영역 -->
<h1>또 다른 제목</h1>
<h2>또 다른 부제목</h2>
<p>또 다른 컨텐츠</p>
</body>
</html>
소제목과 직위를 나타내는 태그의 식별자가 sub-title로 같으므로, 두 개를 구분하고 싶을 경우 태그를 생략하지 않는다.
[CSS] CSS Seletor (CSS 선택자) 2
🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제
isaac-christian.tistory.com
CSS Selector (CSS 선택자) 2 글과 이어진다.
