유용한 사이트
Pesticide
구글 크롬 익스텐션으로 설치한 후 개발자모드로 체크하거나 Allow access to file URLs를 켜두기
CSS Default Browser
브라우저에 기본적으로 깔려있는 CSS 효과
https://www.w3schools.com/cssref/css_default_values.asp
MDN reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
디자인 참고
션할핀 개인 홈피 https://www.seanhalpin.design/
CSS 시작하기
CSS는 HTML으로 만든 기본 골격에 스타일을 넣기 위해 사용한다.
HTML에서도 색을 바꾸거나 하는 스타일을 변경할 수 있기는 하다.
만약 HTML에서 가로줄 10개를 모두 바꿀려면 일일이 가로줄을 찾아서 바꿔줘야 한다.
하지만 CSS에서는 가로줄 <hr>로 찍어서 바꿔주면 전체 가로줄 효과 변경을 해주니 편리하다.
HTML의 <head>에 <style> 태그를 넣는다.
head 태그안에서 넣고 싶은 효과를 넣을 수 있다.
External CSS 만들기
html의 head 안에 스타일 줘야할 분량이 많아지면 따로 style.css 페이지를 빼서 관리하는 것이 편하다.
html 폴더과 같은 라인에 css 폴더를 만든다
css 파일 안에 styles.css파일을 만든다
index.html 파일에 css 파일과 링크를 걸어준다.
link 태그: 연결하기
rel: relationship of style sheet
브라우저가 웹페이지 index.html를 위에서부터 읽어갈 때 아 여기에 stylesheet이 있구나
href에 있는 주소로 가야 하는 구나 하고 안다.
href: 파일이 있는 주소
.. - 앞에 점2개는 지금 있는 파일 이 전 파일로 앞으로 돌아가서
/ - 어디로 가야할 지 브라우저에서 어디로 갈지 루트를 찍어준다. 해당 파일로 가라.
알아둘 점
1 적용 범위
css 페이지를 따로 빼 버렸기 때문에
다른 페이지에도 css링크를 공유했다면
css에서 변경한 내용이 다른 html 페이지 모두에 적용이 된다.
2 적용 순서
만약 배경색을 여러 군데에 적용 시켜 놓았다면
1. html 의 body에 흰색
2. html의 style태그 안에 빨강
3 css의 external 페이지에 파랑
위의 1,2,3의 순서대로 웹브라우저는 읽기 때문에
html의 body에 적용된 흰색이 읽혀서 배경색은 흰색으로 보인다.
그래서 모든 페이지에 적용되는 스타일은 external css에 하고,
해당 페이지만 다른 효과를 주고 싶다면 style을 만들거나 더 구체적으로 body 태그 안에 바로 효과를 집어 넣는다.
'CSS > CSS' 카테고리의 다른 글
| CSS] position 속성/ static, relative, absolute, fixed 밸류 알아보기 (0) | 2021.06.29 |
|---|---|
| CSS] display 속성 / block, inline, inline-block, none (0) | 2021.06.28 |
| CSS] box, padding 알아보기. (0) | 2021.06.28 |
| 에러 확인하는 법: console에서 확인 (0) | 2021.06.23 |
| hr 효과주기 / 여러 군데에 있는 태그에 같은 효과 넣기 (0) | 2021.06.23 |
댓글