TIL 21.09.08 HTML and CSS
✏️ HTML global element
😃 전역속성 title
title 내의 써지는 문자열은 스페이스를 인식한다.
text 위에 마우스를 올리면 본인의 title의 value가 있으면 해당 값을
없으면 부모 요소에 해당하는 title의 value 값을 띄운다.
<div title="BORN TO PROGRAMMER">
<div title="YOU ARE BORN2CODE">Mous over here 1</div>
<div title>Mouse over here 2</div>
</div>
😃 전역속성 lang
해당 속성을 사용할 때 특정 페이지의 전체적인 언어를 명시할 때에
<html>에 다음과 같이 속성을 적어주고
본문 특정 부분에 <html>에 명시한 언어와 다른 부분이 생겼을 때
다음과 같이 lang 속성을 넣어서 다른 언어로 작성했다는 표시를 나타내주면 된다.
<html lang="ko">
<head></head>
<body>
<div>...</div>
<p lang="en"></p>
</body>
</html>😃 전역속성 data-*
data-*(data set)의 경우 사용자에게 보여지지는 않지만 후에 자바스크립트 또는 css를 이용해서
해당 내용이 갖는 값에 접근하기 위해 필요한 조치로서 행해지는 전역속성이다.
<ariticle
id="electricars"
data-columns="3">
...
</article>😃 전역속성 draggable
해당 속성은 드래그가 가능한지 아닌지를 부여하는 속성이다.
boolean이랑 다른 점은 drag를 할 수 있는지 없는지를 결정해주기 위해선
값으로 'true' or 'false'를 넣어 주어야한다.
보통의 경우 공백란으로 두었을 때 'true' or 'false' 값이 들어가게 된다.
해당 속성을 사용하는 이유는 웹 브라우저에서 이벤트가 발생했을 때
자바스크립트를 이용해서 적절한 조치를 취할 때 위의 특징을 사용한다.😃 전역속성 hidden
hidden 속성 사용시 스크린리더와 사용자에게 보여지지 않게 된다.
개발자 도구에선 확인이 가능하기 때문에 보안 상의 목적을 위해선 사용하지 않는 것을 권장한다.
hidden 속성에 CSS로 display: flex로 설정 할 경우 hidden 속성이 보여지게 된다.🎨 CSS 개요
✏️ css 소개
CSS (Cascading Style Sheets)
html code를 꾸며주는 역할을 한다.
CSS 안에 모듈이 있어서 모듈 별로 버전이 상이하다.
즉 모듈별로 지원하는 브라우저가 다를 수가 있다는 의미이다.
따라서 출시하려는 서비스의 사용 군이 많이 사용하는 브라우저를 생각하는 것이 중요하다.
개발자 도구에서 Styles 탭을 통해 어떤 효과가 적용되었는지 볼 수 있다.✏️ css 생김새
1. 먼저 selector(선택자)를 통해서 특정 요소를 선택한다.
2. 중괄호를 통해 선언블럭을 형성한 뒤 적용하고 싶은 속성(property)를 적용한다.
3. 속성에 원하는 값(value)을 작성한 뒤 ';'를 말미에 붙여준다.h1 { /* selector: h1 */
color: red; /* property: color */
} /* value: red; */
ul { /* selector: ul */
color: blue; /* property: color */
} /* value: blue; */ ✏️ css를 적용하는 방법
1. 내부 스타일(embedded)
<head> 내부에 <style>...</style>을 작성하여 전체 html에 효과를 적용하는 경우
2. 인라인 스타일(inline)
특정 태그에 속성을 부여해서 특정 태그에만 스타일을 적용하는 경우
위의 인라인 스타일을 지양하고 외부 css 파일을 만들어 연결한 후 css를 적용시키는 것이 좋다.
<body>
<h1 style="color: blue">Hello World!</h1>
</body>
3. 외부 스타일(external)
<link rel="stylesheet" href="style.css"></link>
rel(relation)
html과 관계 있는 파일의 특징을 기입하는 속성란
hyper reference(href)
html과 연결 할 파일의 이름을 기입하는 속성란✏️ 캐스캐이딩 원칙
1. 스타일 우선 순위
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 범위가 적을 수록 우선시 된다.
tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 소스코드의 순서가 뒤에 있으면 덮어쓴다.
# 아래에 다음과 같이 html과 css 코드가 있을 때 우선 순위가 어떻게 적용되는지 살펴보기로 하자.
1. 먼저 <head> 안에 있는 속성이 먼저 적용이 된다.
2. 그 다음 id가 abc인 태그에 글자 색이 핑크색이 적용이 된다.
3. h1의 id가 orang인 태그의 경우 글자 색이 css 순위에 의해 blue가 적용이 될 것 같지만
id의 우선순위로 인해 orange가 적용이 되고 또 인라인 스타일 우선순위로 인해 red가 적용된다.
스타일 우선쉬위과 적용하는지 직접 해보고 살펴본 부분이다.
<head>
<style>
h1 {color : grey;}
</style>
<link rel="stylesheet" href="style.css">
<title>CSS</title>
</head>
<body>
<h1 id="abc">I'm id</h1>
<h1 id ="orange" class="b" style="color: red";>
우선순위
</h1> #abc {
color: pink;
}
#orange {
color: orange;
}
.b {
color: blue;
}2. 스타일 상속
부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어쓴다.
상속이 되지 않는 속성도 있다.(예: 배경 이미지, 배경 색)✍️ CSS Selector
css와 javascript로 특정 태그를 지정해서 스타일을 지정하는 기본 문법이므로
시간을 들여 공부하는 것을 권장한다.✏️ 선택자의 종류
1) Type Selector, Tag selector
h2 태그 안에 있는 내용의 글자 색을 모두 보라색으로 바꾼다.
따라서 하나의 웹페이지에서 일관적으로 적용해야 하는 태그에 Type Selector를 사용한다. h2 {
color: purple;
}2) ID Selector
html에 다음과 같이 <h1>에 Hello World라는 내용이 있을 때
태그를 적용시키는 방법은 다음과 같다.
<h1 id="apple">Hello World</h1> #apple {
color: red;
}3) Class Selector
id selector 와는 다르게 class 는 하나의 값을 여러개의 태그에 적용시킬 수 있다.
작성 방법은 다음과 같다.
<h1 class="apple">Hello World</h1> .apple {
color: red;
}
위 세게의 Selector 모두 스타일 우선순위와 스타일 상속을 따른다.✏️ 속성 선택자 (1부)
a[target] {
color: hotpink;
}
a[href="특정값"] {
color: indigo;
}
input[type="submit"] {
background-color: green;
}위와 같이 작성한 3개의 케이스에 대해서 알아보자.
1. 첫번째 경우 a라는 태그에 target이라는 속성이 있는 내용의 글자 색이 hotpink가 된다.
a 태그에 모두 적용되는 것이 아닌 'a 태그이면서 and target' 속성이 있는 태그에 적용된다.
2. 두번째의 경우도 위와 유사하다.
a 태그이면서 and href 속성을 가지면서 and 속성 값이 "특정값"을 가지는 조건에서
해당 태그의 내용의 글자 색이 indigo로 적용한다는 의미이다.
3. 두번째 경우와 똑같이 적용 된다.
css와 JS and python bs4 사용시 css selector 규칙을 따르기 때문에 숙지하는 것이 좋다.✏️ 속성 선택자(2부)
a[href^="http"] {
color: red;
}
a[href$=".com"] {
font-style: italic;
}
a[href*=""] {
color: sienna;
}1. a 태그 중에서 href 속성을 가진 태그 중에서
http로 시작하는 태그 내용을 빨간 색으로 적용하겠다.
2. a 태그 중에서 href 속성을 가진 태그 중에서
'.com'으로 끝나는 태그 내용에 이탤릭체를 적용한다.
3. a 태그 중에서 href 속성을 가진 태그 모두에 담긴 내용의 색을 sienna로 적용한다.✏️ 가상 클래스 선택자(1부)
css 선택자 기본 골격 이외의 작성법에 대해서 알아보자 selector {
propery: value;
} 아래와 같이 작성 할 경우 li 태그 중에서 첫번 째 자식 요소인 태그가 선택이 된다.
li 태그가 두개일 경우 2개의 요소가 선택되는 것이다. li:first-child { /*태그 가상 선택자 선택 방법*/
color: green; /*li 태그와 동일선상의 형제들 중에서 첫번째 형제에 적용*/
}
.movie:first-child{ /*클래스 가상 선택자 선택 방법*/
font-size: 32px; /*movie class와 동일선상의 형제들 중 첫번쨰 형제에 적용*/
}
span:last-child { /*span 태그 중 마지막 요소에 적용*/
color: tomato;
}
li:nth-child(2n) { /*li 태그 중 짝수번째 자식 요소의 내용에 적용*/
color: hotpink;
}
li:nth-child(odd) { /*li 자식 태그 중 홀수 번째 태그에 적용*/
propery: value;
}
li:nth-child(even) { /*li 자식 태그 중 짝수 번째 태그에 적용*/
propery: value;
}✏️ 가상 클래스 선택자(2부)
p:first-of-type {
color: red;
}
p:last-of-type {
color: blue;
}
.movie:first-of-type {
color: red;
}1. p 태그 형제들 중에서 첫번째 형제를 지정한다.
2. p 태그의 형제들 중에서 마지막 형제를 지정한다.
위의 두가지에서 중요한 점은 서로 다른 깊이의 p 태그가 여러개 있고
3개의 다른 깊이 내 3개의 p태그를 갖고 있을 때
first-of-type을 적용 할 경우 다른 층위의 첫번째 p 태그가 적용된다는 점이다.
last-of-type도 위와 동일하다. <div>
<span>a</span><span>a</span><span>a</span>
</div>
<div><div>
<span>b</span><span>b</span><span>b</span>
</div></div>
<div><div><div>
<span>c</span><span>c</span><span>c</span>
</div></div></div>span:first-of-type {
color:blue;
font-size: 20px;
font-weight: bold;
}
3. class 이름이 movie인 태그들 중에서 첫번째 요소를 모두 지정한다.
예를 들어 movie class이면서 서로 다른 유형의 태그가 총 3개일 경우
3개의 태그를 갖는다.✏️ 가상 클래스 선택자 not
selector:not(selector2) {
}selector 태그를 고르되 selector2를 제외하여 선택한다.
즉 selector가 selector2를 포함하기에 위와 같은 문법을 작성한다.input:not([type=submit]) {
background-color: indianred;
}
위와 같이 여러개의 input이 태그가 있을때 속성으로 type이 submit일 때 를 제외할 수도 있다.✏️ 가상 클래스 선택자 link and visited
<a href="https://www.naver.com"></a>
유저가 특정 사이트에 방문한 적이 없을 때와
특정 사이트에 방문한 적이 있을 때로 나누어서 생각해 볼 수 있다.
크롬 브라우저 내에서 방문하지 않은 사이트 일 경우
link의 내용이 자동으로 파란색으로 스타일링 된 것을 알 수 있고
방문한 사이트 일 경우
link의 내용이 보라색으로 스타일링 된 것을 알 수 있다.
위와 같은 2가지 케이스가 있기 때문에 css를 통해
before visit와 after visit에 대한 스타링을 아래와 같이 적용해서 바꿀 수 있다.a:link {
color: tomato;
}
a:visited {
color: yellowgreen;
}✏️ 가상 클래스 선택자 hover, active, focus
여러개의 <input>이 있고 속성 선택자로 특정한 type을 선택한 뒤 위의 특징을 적는다.input[type=submit] {
background-color: skyblue;
border: none;
}
input[type=submit]:hover {
background-color: teal;
}
input[type=submit]:active {
background-color: red;
}
input[type=submit]:focus {
background-color: blue;
}캐스캐이딩 원칙, 나중에 작성한 것이 최종적으로 적용된다는 규칙에 따라 LVHA 순서로 작성한다.
LVHA라 함은 link -> visited -> hover -> active 순이다.
위 코드를 해석하자고 한다면 input 태그중 type으로 submit를 가진 요소의 배경색을
하늘색으로 정한 후 테두리를 없애준다.
마우스를 위의 특성을 가진 input 태그에 가져갔을 때 배경색을 teal로 변하게 하라
그리고 그 중 마우스로 하나의 태그를 클릭했을 때 배경색을 빨간색으로 변하게 하라
tab key를 통해 요소들을 왔다갔다 할 수 있는데 그 때 focus 된다고 한다.
그 때 색깔을 파란색으로 적용하라는 의미이다.
input type="text"일 경우 특정 칸을 클릭했을 때 focus의 상황으로 간주한다.✏️ 가상 클래스 선택자 enabled, disabled, checked
위의 요소는 <input>에 많이 사용된다.input[type=text]:enabled {
background-color: skyblue;
}
input[type=text]:disabled {
background-color: silver;
}
input[type=radio]:checked {
outline: 3px solid red;
}
input[type=checkbox]:checked {
outline: 3px solid blue;
}
1. input type이 text인 요소가 활성화 될 때 배경 색을 하늘 색으로 지정하시오.
기본값이 enabled이기 때문에 처음부터 하늘색으로 지정될 것이다.
2. input type이 text인 요소가 비활성화 될 때 배경색을 은색으로 지정하시오.
3. input type이 radio인 요소가 체크될 때 바깥 테두리를 3px 실선 빨간색으로 지정
4. input type이 checkbox인 요소가 체크될 때 바깥 테두리를 3px 실 파란색으로 지정✏️ 가상 요소 선택자 before, after
기본 골격
selector:__
selector::__ /* 위 표현보다 아래 표현을 권장한다*/
.movie::before {
content: '⭐';
color: tomato;
}
html에 movie 이름의 class가 있을 때 해당 내용 앞에 무엇을 스타일링 하고 싶을 때
가상 요소 선택자를 사용하여 스타일링 해줄 수 있다.
드래그로 해당 요소를 선택할 수 없다는 것이 특징이다.
위와 같이 css 코드를 작성해 주었을 때 '⭐'가 movie class의 content 앞에 붙는다.✏️ 가상 요소 선택자 first-letter, first-line, selection
first-letter
첫번 째 글자에 대해서 스타일링을 할 때 해당 가상요소 선택자를 사용한다.
아래와 같이 작성 할 경우 lorem이라는 클래스의 내용에 'Before'가 추가되고
'B'에 빨간색이 적용된다..lorem::first-letter {
color: red;
}
.lorem::before{
content:'Before'
}first-line
첫번 째 줄에 속성을 적용하고자 할 때 다음과 같은 스타일링을 사용한다..lorem::first-line {
color: red;
}selection
드래그 한 선택 요소에 대한 스타일링을 적용할 때 사용한다..lorem::selection {
color: red;
}✏️ 선택자 결합-하위, 자식
스페이스를 통해 특정 태그 밑에 있는 하위 태그를 지정할 때 하위 선택자 사용
스페이스를 통해 특정 태그 바로 밑에 있는 자식 태그를 지정할 떄 자식 선택자 사용ul li:last-of-type {
color: red;
}위와 같이 code를 작성했을 때 해석하면
ul 태그 아래 있는 여러 층위의 li 태그들 중 마지막 태그를 빨간색으로 지정ul > li:last-of-type {
color: red;
}위와 같이 code를 작성했을 때 해석하면
ul 태그 아래 있는 바로 밑에 있는 자식 li 중 마지막 태그 내용을 빨간색으로 지정
위 두개의 코드는 서로 다른 코드이므로 헷갈리지 않고 분별해서 사용하도록 하자.✏️ 선택자 결합 - 일반형제 선택자결합, 인접형제 선택자결합
1. 일반형제 선택자 결합
같은 부모를 두고 있는 형제들을 중에 지정을 하는데
특정 선택자 뒤의 특정 선택자를 선택하고자 할 때 사용한다.
아래와 같이 코드를 작성 할 경우 <code> 라는 태그 아래에 있는 형제 태그들 중에서
p라는 태그의 내용색을 빨간색으로 지정한다는 의미이다. code ~ p {
color: red;
}2. 인접형제 선택자 결합
같은 부모를 두고 있는 형제들을 중에 지정을 하는데
특정 선택자 바로 뒤의 특정 선택자를 선택하고자 할 때 사용한다.
아래와 같이 코드를 작성 할 경우 <code> 라는 태그 바로 아래에 있는
형제 태그들 중에서 p라는 태그의 배경색을 파란색으로 지정하라는 의미이다.
여러개를 지정할 수 있다는 것을 주의해야 한다. code + p {
background-color: red;
}3. 그룹화
여러개의 선택자를 선택하여 동일한 효과를 적용하고 싶을 때 사용한다. p, span {
color: blue;
}✏️ 범용 선택자
* {
color: red;
}
*.red {
color: red;
}1. 위와 같이 작성할 경우 css 전체에 걸쳐 스타일이 적용된다.
2. 2번째 코드 같은 경우 class가 red인 속성에 모두 적용한다라는 의미이다.
지금까지 사용할 때 '*'을 생략했다는 의미이다.✏️ 상속 (1부) - initial
부모태그에 특정 스타일이 적용 되고 자식 태그가 있을 때
상속이 되는 propery의 경우 자식도 부모의 property를 물려 받는다.
만약 부모의 상속을 끊고 싶을 경우 propery 값에 inital을 적어서 상속받지 않게한다.
모든 속성을 끊고 싶을 때 all: inital을 통해 적용한다.
아래 코드를 통해 살펴보자 html 부문
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div> css 부문
div {
border: 1px solid blue;
margin: 2px;
}
.parent {
font-size: 25px;
color: aquamarine;
}
.child1 {
color: initial;
}
.child2 {
all: initial;
}
결과물을 보면 child1 class의 div의 경우 색을 부모로 부터 물려받지 않았고
class child2의 div의 경우 모든 프로퍼티(border, margin, font-size, color)
등을 부모로부터 물려받지 않았다고 볼 수 있다.
여기서 중요하게 보아야 할 점은 자식의 프로퍼티에 특정 값이 있을 때
부모의 property를 물려 받지 않는 다는 점이다.
후순위로 작성한 css 스타일링 code가 있을지라도 해당 code에 영향 받지 않는다.✏️ 상속 (2부) - inherit
css 부문
div {
border: 1px solid blue;
margin: 2px;
}
.child1 {
color: red;
}
.parent1, .parent2 {
color: blue;
}
.parnet2 * {
all: inherit;
} 위와 같이 코드가 작성 됐을 때 class child1 의 경우 자신의 property가 있으므로
부모요소인 parent1으로 부터 color의 속성을 물려받지 않는다.✏️ 상속 (2부) - unset
1. 부모로부터 상속받을 값이 없을 때 :
2. 부모로부터 상속받을 값이 있을 때 : ✏️ 생태 포식 관계
!important > inline style >
ID > Class/Attribute/Pseudo Class
> Type(tag) > * > inherited Author And Source
이 문제에 관하여(TIL 21.09.08 HTML and CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@woodstock1993/TIL-21.09.08-HTML저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
