안녕하세요 길잃은문돌이입니다. 이전 html 마지막편에서, 생활코딩을 보지 않고 seoul wiz 강의를 들을려고 했는데, 사실상 강의가 길다고 해서 많은걸 가르쳐 준다고 생각했던 저의 착오였어요. 전체적인 글을 다 쓰고 이렇게 인사글을 적는데, Seoul Wiz 강의를 보다가 와 이건 아니다 싶어서 다시 생활코딩 css강의로 돌아왔어요.
인프런 보다는 유튜브가 조금 강의가 세부적으로 나와서 유튜브를 통해서 봤구요. 또 다시 생활코딩이 이해하기 쉽게 말씀해 주시고 코드를 보여줄때도 사용자가 보기 쉽게 큼직큼직하게 해줘서 좋더라구요.
자, 여튼 서론이 너무 길었습니다!
비전공자 IT 코딩독학 : CSS 기초 1편 선택자의 종류들 한번 살펴보시죠.
비전공자 IT 코딩독학 #10 : HTML 기초 4편 HTML5 속성
안녕하세요 길잃은 문돌이 입니다. 벌써 HTML 기초 4편인데, 사실 5편까지 제작할 생각이였지만, 강의 내용이 너무 작기도 하고 제가 비전공자 IT코딩독학 글을 쓰면서 강의를 듣다가 저장도 안하
lostedhelloworld.tistory.com
HTML을 배우면서 전체적인 구조를 잡았다면, 어느 레이아웃을 나누고 한 곳의 색상을 바꾸고 스타일을 바꾸는 역할을 하는 언어가 CSS이다.
*html태그중 배우지 않았던 코드가 있는데,
글자의 색이라던가 배경의 색상을 선택을 해서 선택한 태그에 또다른 속성을 주어 스타일을 주는 것이다.
CSS 스타일을 별도의 문서에 뽑아서, 코드를 작성하고 HTML로 링크를 거는 방법도 있다.
하지만 결국 HTML 이 기본이 되어야한다. html은 기본적으로 정보를 담고 보내는 수단이다.
시간이 지나면 지날 수록 좀 더 예쁘고 디자인되어있어 사용자 편의를 주기 위해서 css가 태어났다고 보면된다.
css는 결국 html 태그 중에서 특정한 태그를 선택하여 해당 태그만을 디자인한다고 생각하면 편하다.
1. HTML과 CSS가 만나는 방법
1)
<body>
<h1 style="color:red"> hello world</h1>
</body>
2)
<head>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1> hello world</h1>
</body>
1) Html코드안에 style이라는 속성을 통해 css 코드를 넣을 수 있다.
2) HEAD태그 안에 <style> 태그 안에 css코드를 넣을 수 있다.
ex)
<head>
<style>
li{
color:red;
}
</style>
</head>
2. CSS 선택자 종류
특정 태그(HTML)를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용된다.
<head>
<style>
li{
color:red;
}
</style>
</head>
<body>
<ul>
<li>thml</li>
<li>css<li>
</body>
style태그에 포함되어있는 li는 body에 있는 li태그를 "선택"했기에 선택자라고 불린다.
효과를 주고자 하는 대상을 정확하게 집어서 선택하지 못하면 쓸모가 없기에, 선택을 잘해야한다.
1) id 선택자
<ul>
<li>html</li>
<li>css</li>
<li>Javascript</li>
</ul>
인 상황에서,
헤드태그에
<style>
li{
xxxxx
}
</style>
를 하게 되면, 모든 li에 효과가 적용되기 때문에, 해당 항목만을 콕 집어서 효과를 적용 시키고 싶다면,
id 속성을 이용하면된다!
(feat. # )
<li Id="select">css</li> 를 하고
헤드태그에
#select {
font-size: 100px;
}
2) 클래스 선택자
(id 는 1개만 선택가능하다.)
2개 이상일 선택하고자 한다면 class 선택자로!
(feat . )
id가 1개만 선택가능하다 라는게 무슨의미인가?
ex)
<sytle>
#active{
text-decoration : line-through;
}
</style>
<ul>
<li id="active"> HTML </li>
<li id="select"> css</li>
<li id="active"> java</li>
</ul>
→ 이럴 경우 id="active"가 2개 이상이기에, id의 고유한 규칙에 맞지 않는다
그렇기에, id속성이 아닌, 2개 이상 선택을 하고싶다면 class를 사용해야한다.
<style>
#select{
font-size= 50pt
}
.class{
text-decoration= line-thorugh;
}
<li class="active">html</li>
<li id ="select">css</li>
<li class="acitve>java</li>
3) 부모 자식 선택자
<ul>
<li>html</li>
<li>css</li>
<li>java</li>
</ul>
<ol>
<li>html</li>
<li>css</li>
<li>java</li>
</ol>
일때, 위의 그룹에 선택을 하여, 효과를 주고싶다면,
ul li{
color:red;
}
→ ul 밑에 있는 li를 의미하고자할때 ul은 부모가 되고 li는 자손이 된다.
여기서 의미하는 li는 '모든 자손'을 의미하고
자손의 깊이가 있을 경우 "직계자손"이라는 의미가 생긴다.
즉,
<ul>
<li>html</li>
<ol>
<li> html의 의미</li>
<li> html의 기능<li>
</ol>
</ul>
일경우에는 ul 의 모든 자손에는 li와 ol과 ol의 li가 있지만,
ul의 직계 자손의 ul의 li이다.
이런 경우
<style>
ul>li{
border:3px solid:red;
}
</style>
예의의 경우도 생각 해보아야한다.
만약
<ul>
<li>html</li>
<ul>
<li> html의 의미</li>
<li> html의 기능<li>
</ull>
</ul>
일 경우에는 어떻게 해야하는가? ul이 2개 이고
<style>
ul>li {
xxxxx
}
</style>
라고 하고자 한다면, ul이 무엇을 지칭하는지 알 수 없다.
이럴 경우에는
원하는 ul에 id선택자로 갈음하는게 좋다.
<ul>
<li>html<li>
<ul id=ulseclect>
<li> html의 의미 </li>
<li> html의 기능</li>
</ul>
</ul>
이라고 생각한다면 해드태그에 무엇이 들어가야하는지 명확해 진다.
<style>
#ulseclect > li {
border:3px , solid:blue;
}
</sytle>
이라고 한다면 ul 중에서는 안쪽에 있는 자손 ul의 li를 선택하라는 말이기에, 안쪽에 있는 html의 의미, html의 기능에만 테두리가 적용이 될 것이다.
부모 자식의 경계가 없는 태그에 주고 싶다면,
ul, ol {
xxxx 로 하면된다.
}
요약..
<style>
. xxx >> 클래스 선택자
# xxx >> id선택자(1개만 선택가능)
ol ul >> ol(부모) ul(자손) 선택자
ol>ul >> ol(부모)의 ul(직계자손) 선택자
ol,ul >> 부모 자손관계가 아닌 이웃 선택자
4) 가상 클래스 선택(pseudo class selector)
클래스 선택자 처럼 동작하지만, 클래스는 아니고 어떤 여러가지 특수한 선택들을 하게 하는 선택자,
각자의 element 상태에 따라서 선택하는 선택자 (active인 상태에서만 발생하는 등등 여러가지 조건이 있을때 작동하는 선택자)
사용방법 :
선택자 : xxx
ex)
<a href="http://naver.com"> 방문함</a>
<a href ="http://naver.com">방문안함</a>
이러한 화면이 뜬다고 가정했을때,
a : active {
color : white
}
→ a태그의 active가 된다면 색상을 하얀색으로 칠한다는 의미.
여기서 active 란, 마우스를 클릭을 쭉 하는 상태
a: hover {
color: white
}
→ a태그의 hover가 된다면 색상을 하얀색으로 칠한다는 의미.
여기서 hover란, 마우스를 올려둔 상태
a: visited{
color: white
}
→ a태그의 visited가 되었다면 색상을 하얀색으로 칠한다는 의미.
여기서 visited란, url을 방문한다면, 기본적으로 보라색으로 칠해지고 방문하지 않았다면, 파란색으로 칠해지지만, 색상을 바꿀 수 있다. 여기서는 보안적인 문제로 visited의 가상클래스선택자에서 포함되는 속성은 제한적이라는점!
a:link {
color : white
}
→ a태그의 링크는 모두 하얀색으로 칠한다는 의미.
여기서 link란 url을 뜻하며, link랑 visited랑 동급의 클래스이기에, css에서는 동급의 경우 하위 선언을 우선한다는 점,
그렇기에, link를 위에, visited를 밑에 두어야 클릭 후, 클릭을 한지 안한지 알 수 있다.
a:focus{
color: white
}
→ a태그가 포커스 되었다면 하얀색으로 칠한다는 의미.
여기서 focus란, tap키를 클릭하면 포커스가 되었다고 하는데
a 태그 보다는 <input type="text"> 의 태그에 많이 쓰인다. 키보드 focus가 되어야 작동하는 것이기에 링크는 잘 사용되지 않는다.
'문돌이의 Hello, World! > 리얼 컴맹의 왈가왈부' 카테고리의 다른 글
| 비전공자 IT 코딩독학 #13 : CSS 선택자의 우선순위 및 캐스케이딩 (0) | 2022.07.27 |
|---|---|
| 비전공자 IT 코딩독학 #12 : CSS 기초 2편 선택자 / 폰트 (0) | 2022.07.24 |
| 비전공자 IT 코딩독학 #10 : HTML 기초 4편 HTML5 속성 (0) | 2022.07.08 |
| 비전공자 코딩독학 #9 : HTML 기초 3편 table, form 요소 (0) | 2022.07.06 |
| 비전공자 IT 코딩독학 #8 : HTML 기초 2편 기본태그 및 구조 (0) | 2022.07.04 |