CSS(2021-02-05)
- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다.
- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)
Your First CSS
CSS는 Cascading Style Sheet의 약어로 문서의 스타일을 내는데 사용된다.
기본적인 CSS의 형태는 이하와 같다.
selector에는 어떤것을 선택할 것인지.
property 에서는 무엇을 할 것인지
value 에는 property에서 하기로 한 것의 값이 무엇인지를 결정한다.
CSS 파일과 HTML을 연결시켜 주는 방법은 head 부분에 link 태그를 쓰면 된다.
다른방식으로도 스타일링을 추가 할 수 있다.
1. inline styles
기존에 스타일링을 추가하던 방식이며 HTML의 요소에 직접 스타일링을 표시하는 것이다.
2. <head> 태그 안에 style태그 사용하여 css 작성.
CSS Properties
이하의 링크가 CSS 속성과 생상을 찾는데 도움이 많이된다.
css의 속성값을 이용해 여러가지 것들을 조작이 가능하다.
한가지 기억할점은 border 속성에 쓴 rgb인데 각 숫자는 red green blue를 나타내며 rgba 로 쓸경우 opacity (투명도) 까지도 조절이 가능하다.
CSS Selectors
- css 셀렉터는 cascading이라는 이름이 명시하듯 아래에 오는 것이 적용된다.
- .class는 html에서 해당 class로 구분된것들을 선택한다.
-#id 는 표시된 아이디의 요소를 꾸며준다.
이외의 셀렉터들은 이하의 링크를 참조하도록 하자.
가장 자주쓰이는 것들은(element, element / element element / element > element / element + element) 정도이다.
www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
또한 셀렉터는 specificity 라는 특징이있는데 css에서 더 자세하게 표현 할 수 록 specificity 점수가 높아져서 다른것에 비해 선택될 확률이 높다는 것이다. (specificity.keegan.st/)
추가로 클래스는 여러개가 있을수 있지만 아이디는 하나만 존재 할 수 있다.
CSS의 상속에 관한 더 자세한 설명은 이하의 링크를 참조하자.
developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
Cascade and inheritance - Learn web development | MDN
The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved. While working through this le
developer.mozilla.org
간단하게 css에 대해 테스트해볼수 있는 게임이다.
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
Text and Font
아래와 같은 속성을 이용해서 페이지에 표시되는 폰트와 글자를 수정할수 있다.
폰트가 사용자의 컴퓨터의 없을 경우를 생각해서 html에서 해당 폰트를 불러올수 있게 해주는 방법은 이하와 같다.
Images In CSS
CSS에서 이미지에 자주쓰이는 속성에 대한 강의이다.
img 에 float 속성을 사용하면 항상 텍스트 옆에 해당 이미지가 뜨게된다.
해당이미지 옆에 뜨게하고 싶지 않은 텍스트는 clear속성을 이용해줘야 한다.
www.w3schools.com/css/css_float.asp
CSS Layout - float and clear
CSS Layout - float and clear The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side. The float Property The float property is used for positioning
www.w3schools.com
Box Model
px vs em vs rem
지금까지 픽셀을 사용했지만 em과rem도 사용가능하다.
em은 해당 요소가 담고있는 요소의 기본 사이즈에 비례해서 사이즈가 정해지며
rem은 root 요서에 비례해서 사이즈가 정해진다.
www.w3schools.com/cssref/css_units.asp
CSS Units
CSS Units CSS Units CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. Example Set differe
www.w3schools.com