티스토리 뷰
몇일동안 조금 게을러져서 안하다가 다시 마음을 다잡고...
공부를 시작하였다. 코로나 때문에 어디 가지도 못하고 이게 뭐람!
오늘은 CSS의 기본문법에 대해서 배웠다.
CSS를 이용하는 방법에는 두가지가 있다.
1. <head> 안 <style>태그를 걸고 그 안에서 css문법을 활용하기 -> css등장의 필요성에서 다뤘다.
2. 다른 태그안에서 style 속성을 활용하기
<a href="____" style="color:red">
2번의 경우에 style을 쓴 경우, 이 속성값을 웹브라우저는 css 문법에 따라 해석, 속성을 둘러싸고 있는 태그에 적용해라.
따라서 여기서 style=""은 css가 아니라 html의 속성이다.
-----------------------------------------------------------------------
1번과 2번의 css는 다른 점이 있다.
2번은 html 태그안에서 그 태그에만 한정되어 있고,
1번은 a라는 선택자에 대해서 css값을 지정?하는 것이다.
즉, 1번은 하나의 선택자에 대해서 여러개의 효과 지정
-------------------------------------------------------------------------
1번의 모양은 이렇다.
<style>
a{
color:red;
}
</style>
여기서 링크가 연결된 것의 밑줄을 없애고 싶을 때 { }안에 text-decoration:none; 을 넣어준다.
그러면 모든 a 태그에 대해서 밑줄이 없어진다.
<style>
a{
color:red;
text-decoration:none;
}
</style>
(여기서 세미콜론(;)을 쓰는 이유!)
1. color:red; text-decoration:none; 이 둘을 한줄에 썼다고 가정하면 ;를 사용하지않으면 구분이 되지 않는다.
2. 효과가 끝나는 지점에 대한 표시
하지만, 내가 선택한 링크 a 에 대해서는 밑줄을 남기고 싶을때는
head아래의 style말고 <a>안에 style="text-decoration:underline" 이렇게 지정해주면 된다.
br에 대해서 style을 적용해 봤는데 안돼었다ㅜㅜ
그래서 아톰을 켜서 해보기로 했다
오 밑줄이 사라졌다. 모든 a 태그에 대해서 사라졌다.
CSS 문법의 이론에 대해서 말해보자면,
저기에 있는 a 는 selector이고, 어떤 태그를 선택할 것인가?
declaration은 선언으로, 어떤 효과를 줄건가? 이다.
color는 속성이고, red는 property의 값이라서 value라고 부른다.
--------------------------------------------------------------------------
앞으로의 여정
1. 이 CSS를 통해서 어떠한 property가 존재하는가?
2. 선택자를 알아가는 과정!
'WEB BASIC' 카테고리의 다른 글
| 개발자 취업자세 (0) | 2023.08.29 |
|---|---|
| [CSS] Web2 : css 속성, 글자크기 키우기, 가운데 정렬하기 (0) | 2020.03.06 |
| [CSS] Web2 : css 등장의 필요성 (0) | 2020.03.03 |
| [HTML] Web1 : 방문자 분석기, google analytics (0) | 2020.03.02 |
| [HTML] Web1 부록 : 채팅기능 추가하기, tawk (0) | 2020.03.01 |
- Total
- Today
- Yesterday
- web1
- Python Basic
- tag
- EasyEnglish
- gitbash
- ATOM
- 생활코딩
- 문단
- 줄바꿈
- html
- SCRIPT
- 스피킹공부
- Head
- study
- 기록
- 파이썬기초
- list
- git
- property
- CSS
- title
- EBS
- speaking
- img
- BASIC
- WebServer
- EASY ENGLISH
- web
- 기초
- Python
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |