CSS 문법:
원하는 선택자 태그와 중괄호 안에 "속성명:속성값;" 으로 선택자에 CSS를 적용할 수 있습니다.
Universal selector:
* {
text-align: center;
color: blue;
}
모든 selector에게 공통적으로 적용되는 css이다.
CSS 적용 3가지 방법:
- Inline: 태그 안에 CSS를 적용시키는것
- Internal: 같은 HTML파일 안에서 <head> 태그안의 <style>태그 안에서 정의해주는것
- External: 별개로 별도의 CSS 파일을 생성하여 여러 HTML 파일에 동일한 CSS를 적용하는 것
Cascading Order:
여러 CSS 방법이 적용되어 있다면, Inline > Internal > External 순으로 우선시되어 적용된다는 뜻
다양한 CSS Properties:
- Comment: <!-- 내용 --> , /* 내용 */
- opacity: 투명도 조절
- (범위: 0.0 ~ 1.0)
- background-image: 배경 이미지 적용
- background-attachment: fixed; => 배경 이미지 고정시키기
Margin:
- margin: Top, Right, Bottom, Left (위에서 시계방향 순으로 지정)
- 아래는 Top, Bottom: 25px, Right, Left: 50px 입니다.
margin: auto
margin: auto로 설정해놓으면 행에서 좌우 여백을 고려하여 정중앙에 배치되게 만듭니다. (상하여백은 고려안함)
즉, div element에게 할당된 가로:300px 을 제외하고 행에서 남은 여백을 조절하여 div element를 정중앙에 배치합니다.
Margin Collapse:
이건 따로 CSS 속성이 있는것이 아니라 일종의(?) 법칙입니다...!
가령, h1 태그가 bottom: 50px;
h2 태그가 top: 20px; 이 주어지고 서로 위아래에 맞닿이게 배치되어있다면, 두 element의 공간은 하나로 collapse되어 50px이 됩니당!!
Padding:
- width + padding: 총 길이.
- width:300px을 의도하였으나, padding:25때문에 총 길이는 350px이 되었다. (좌+우: 25px+25px)
- 원하는 크기의 element를 만들고 싶을때에는, 아래 해결 방법이 있다.
- box-sizing: border-box;
- 이렇게 하면 element의 크기를 테두리까지의 길이를(border-box) 기준으로 사이즈를 지정할 수 있기 때문에 사이즈 조정에 유용하다.
- element의 크기는 원하는 300px으로 설정을 할 수 있고, 안에 padding:25px이 적용되어 텍스트가 한껏 좁아진것을 볼 수 있다.
Text-align:
- text-align: justify
- element안의 모든 글자 간격 균등하게 만들기.
- text-decoration: none;
- 링크에 밑줄 제거
- 우측 결과처럼 링크 밑줄을 제거하는데 사용된다.
- text-decoration: line-through 취소선 긋기
- text-indent: 50px;
- 글자 들여쓰기
- letter-spacing: 글자 간격
- 줄 간격:
line-height: 1.8
ex) p element에 big 이라는 class css를 적용한 모습
Bootstrap Icons:
아이콘을 적용시 다운로드가 필요없는 bootstrap을 사용하면 유용하다. (CDN 을 사용하기 때문에 인터넷에서 바로 이모티콘을 reference해서 적용할 수 있다)
사용법은 <link rel="stylesheet" href="웹사이트 cdn링크 주소"> 만 하면 끝이다. (대신 cdn 을 지원하는 boostrap을 제공하는지 봐야함)
CSS Links:
css 링크는 a 태그, (즉 anchor 태그)를 활용하여 사용할 수 있다.
a 태그에 적용할 수 있는 css는 아래와 같다.
1. 링크를 방문하기 전의 css
2. 링크를 과거에 방문했을시 css
3. 링크에 마우스를 올렸을때 css
4. 링크를 마우스로 클릭했을때 css
주의점:
CSS lists:
css list에 특정 list style 따로 따로 적용방법:
CSS tables:
우리가 흔히 사용하는 horizontal divider는 table을 만들고 border-bottom:만 활성화 시켜서 만드는 방법이다.
CSS Layout:
display 특성:
CSS layout을 display를 사용하여 조종할 수 있다.
CSS element은 크게 2가지 타입이 있는데,
1. Block-Level Elements : 새 행에서 시작하고 각 element는 따로 행을 가진다.
2. Inline-Level Elemetns : element가 필요로 하는 만큼의 공간만 차지한다. 즉, 한 행에 여러 element가 (공간만 충분하다면) 함께 올수 있다.
CSS Layout - The position Property
- position: static;
일단 모든 태그들은 처음에 position: static 상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.
- position: relative;
여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.
(이건 내가 생각했던 대로 무슨 상대위치 이런게 아니라 위치를 사용자 임의로 설정할 수 있다는 뜻이다... )
## 태그 옆에 공간을 준다고 생각하면 됩니다!! (ex. left:5px; --> 태그 왼쪽으로 5px을 준다는 뜻!!)
즉, position: relative;
left:5px; --> 태그 element의 왼쪽에 5px 간격이 생겨서 오른쪽으로 움직입니다.
태그를 왼쪽으로 움직이고 싶을때에는, left: -5px; 로 해줘야함!!
- position: fixed;
이건 태그를 어느 한 위치에 고정시킬 때 씁니다. 즉, 스크롤을 아무리 움직여도 화면상에는 한 곳에 고정되어 움직이지 않고 보여집니다.
- position: absolute;
원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
요약:
static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. (무슨 말이냐면,
<div
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
출처:electronic-moongchi.tistory.com/26
- position: sticky
특정 element를 페이지를 스크롤 하여도 특정 위치에 계속 붙어 있는 효과를 나타낸다.
Overlapping Elements
element를 겹처보이게 하고 싶으면 한 element가 다른 element 뒤에 위치하면 된다.
이걸 적용하기 위해 z-index: -1 을 하면 해당 element가 다른 element 뒤에 위치하게 된다.
CSS Overflow
이건 contents (내용물)이 담고 있는 container element를 넘치면 (overflow) 어떻게 처리할지 지정하는 CSS 이다.
각 방법은:
1. visible- 내용물이 넘쳐나는데로 그냥 내비두어서 보여지게 하는것
2. hidden- 넘처나는 내용물은 안보이게 가리는것
3. scroll- 넘치는 내용물을 스크롤바로 보이게하는것
4. auto- scroll과 유사, 필요할 때만 스크롤바가 생성된다.
CSS Layout - float and clear
- float:left:
float은 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.
- clear: both;
clear은 float속성을 사용하여 float:left, right, top, bottom을 적용하고 난 뒤에 해당 객체 다음에 오는 객체 element가 붙지 않게 하기 위해서 사용하는 속성입니다.
즉, clear 속성은 float 속성이 적용된 이후 나타나는 다음 요소들의 동작을 조절해 줍니다.
아래 사진은 원래 p 태그가 float: left; float:right 사이에 남은 공백에 위치하였는데 , text 문자를 아래로 오게 하기 위해 적용한 속성이 바로 clear: both; 이다.
float 속성을 이용한 HTML layout 방식!!: (중요 --> 굿!)
<div> 태그 안의 <header>, <nav>, <section>, <footer> 태그는 block style을 따라서 각 태그는 한줄 전체를 활용합니다.
하지만, <nav> 와 <section> 태그는 float와 margin을 사용하여 같은 행에 같이 나타나게 만들었습니다. section 태그 안의 텍스트는 section 구역안에 제한되어 나옴.
<nav> 태그 안에 float:left 와 border: 3px 와 width: 150px; 를 사용하여, 총 가로 길이 156px를 차지하고 있습니다.
<section> 태그는 <nav> 태그 오른쪽에 오게 하기 위해 float 속성을 사용하지 않고, 다만 margin-left: 156px; 를 주어 <nav> 태그 오른쪽에 올수 있도록 만들었습니다.
CSS Navigation Bar
아래 사이트에 한 단계씩 너무 상세하게 설명되어 있어서 고대로 참조해도 좋을듯!!
www.w3schools.com/css/css_navbar.asp
CSS Navigation Bar
CSS Navigation Bar Demo: Navigation Bars Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bar = List of Links A navigation bar needs stan
www.w3schools.com
특이사항:
horizontal navbar를 만들때, 각 list를 display: inline으로 설정!
'웹캠프2021' 카테고리의 다른 글
| CSS Responsive 정리내용 (0) | 2021.01.10 |
|---|---|
| CSS Advanced 정리 내용 (0) | 2021.01.10 |
| HTML CSS Display 속성: inline, block, inline-block에 대해 알아보자 (0) | 2021.01.07 |
| HTML 혼자 연습하는 방법 (0) | 2021.01.07 |
| HTML 여러 행이 한 줄에 안 나오고 밑으로 빠져나올때 해결법 (0) | 2021.01.06 |