본문 바로가기
코딩수강일지/노마드코더 코코아톡 클론코딩 수강일지

노마드코더 코코아톡 클론코딩 #3 수강일지

돌다돌 2023. 6. 22. 22:58

(개인확인용도/간단정리)

 CSS (Cascading Style Sheet)

cf) Cascading - 순차적인,연속적인 (브라우저는 위에서 아래로 읽히고 가장 마지막에 있는 코드가 적용됨★순서가 중요)

 

- HTML에 CSS코드를 적용시키는 방법
1. HTML 파일 내 <head> 부분에 <style> 태그를 이용해 작성하는 방법 (inline CSS)
2. styles.css 파일을 따로 만들고 그 안에 CSS 코드를 작성한 뒤
    HTML 파일에서 <link> 태그를 이용하여 CSS 파일과 연결 (external CSS)

ex) <link href = "styles.css" rel="stylesheet"/>

- rel(relationship) : HTML 파일의 stylesheet의 관계라는 것을 명시해줌

 

★ css 코드 작성 방법

tag name  or  # + id or . + class  or *(css파일 전체적용) {

                   property : property value ;

                       }

* 설명

- css를 적용시키고 싶은 tag name을 적고(가리키는 대상을 지정  - Selector)

- property(속성) : property value(속성값)을 적어줌

- :(콜론), ;(세미콜론) 빼먹지 않기 ☆

- property는 띄어쓰기 안됨(font size X / font-size O)

- # tomato = id = "tomato"

. tomato = class = "tomato"

 

*class

id 처럼 사용 할 수있지만 중복가능하고 여러 클래스를 한번에 적을 수 있음

ex) <span class ="button tomato box">

 

참고 - HTML에서의 tag의 속성은 attribute라고 하고

CSS에서의 속성은 property라고 함

 

* css 특성

block(box) / inline (block은 높이와 너비가 있고, inline은 높이와 너비를 가질 수 없음)

-  block : 다른 요소가 옆에 올 수 없고 한 줄 전체로 적용됨 (ex. div, p, adress등) ☆대부분 block형태

-  inline(in the same line) : 다른 요소가 옆에 올 수 있음 (ex. span, a, image등)       inline tag를 기억해놓기

cf) display 속성으로 변경가능

- inline-block; 을 쓰면 높이와 너비를 가지지만 다른요소가 옆에 올 수도 있는 property value

but. 화면 크기가 달라지면 box들이 다른 줄로 넘어가버리기 때문에 거의 사용 하지 않음

 

* Box의 3가지 특성

- Margin : box의 border 바깥에 있는 공간 ex) margin : 20px 15px 10px 10px(시계방향, 위 오른 아래 왼으로 적용)

cf) Collapsing margins : 위,아래쪽 에서 경계가 같을 때 다른 box지만 하나의 margins으로 취급되어 같이 이동하는 현상

- Padding : box의 border 안쪽에 있는 공간

- Border : 경계(inline box에도 적용 가능)

★inline box → padding, border는 적용되지만 inline은 높이와 너비를 가질 수 없기때문에

margin이 상,하에는 적용 되지 않고 좌,우에만 적용됨

 

★flex box★

규칙

1. 자식 element가 아니라 부모 element에만 명시해야 함

(<body>

     <div>   |  형태이고 <div>에 flex를 적용하고 싶을 때 <body> 밑에 flex를 명시-body container를 만듬)

2. justify-content는 기본적으로 main axis(주축)가 row(수평)

align-item은 기본적으로 main axis(주축)가 column(수직)

* flex-direction으로 주축, 교차축 변경가능

flex-direction : column →  main axis(주축) : column(수직) , cross axis(교차축) : row(수평)

 

★

flex-direction : row일 때, 주축은 수평(row), 교차축은 수직(column)

justify-content의 값은 주축(수평)에 적용되고, align-item의 값은 교차축(수직)에 적용 됨

flex-direction : column일 때, 주축은 수직(column), 교차축은 수평(row)

justify-content의 값은 주축(수직)에 적용되고, align-item의 값은 교차축(수평)에 적용 됨

★

 

*wrapping(화면크기가 줄어들때 내부 container 사이즈도 같이 줄어드는 것)

flex-wrap : wrap (container의 사이즈를 바꾸지 않고 화면이 줄어들면 다른 줄로 옮김)(기본적으로 nowrap)

 

3. vh(viewpoint height) : viewpoint = screen

height : 100vh (= 지금 보여지는 화면크기 100% 만큼 높이를 설정)

 

★position

1. position : fixed;

- 사용시 원래있던 위치에서 가장 위에있는 다른 layer에 놓이게 됨(화면에 어떤 요소를 고정시키고 싶을 때 사용)

2. position : static; (default)

3. position : relative;

- 사용시 원래있던 위치에서 아래에 top,bottom,left,right를 사용해서 이동가능

*position : absolute;

- 가장 가까운 relative 부모 element를 기준으로 top,bottom,left,right를 사용해서 이동가능
position:relative; 를 해주면 부모가 된다. 없으면 body기준으로 이동

 

★pseudo Selectors

(id나 class를 쓰지않고 html 문서 수정없이 css문서에서 수정할 태그를 지정해 css적용시키는 방법★효율적)

- 사용법

1. Selectors : ~ (pseudo-classes)(특정상태 또는 다른 요소와의 관계를 기반으로 요소를 선택할때)

a:first-child {
  color: red;
}

 

1-1 Selectors :: ~ (pseudo-elements)(요소의 특정 부분에 스타일을 지정하는 데 사용)

p::first-line {
  color: red;
}

2. Selectors1 Selectors2 : ~  (Selectors1 아래의 자식 태그인 Selectors2에 모두 적용)

3. Selectors1 > Selectors2 : ~  (Selectors1 아래 바로 다음오는 자식태그인 Selectors2에만 적용)

4. Selectors1 + Selectors2 : ~  (Selectors1 아래 바로 다음에 있는 형제태그인 Selectors2에만 적용) - 떨어져있으면 적용 안됨

5. Selectors1 ~ Selectors2 : ~  (Selectors1 아래 다음에 있는 형제태그인 Selectors2에만 적용)  - 떨어져있어도 적용 가능

ex1)

div span{
	color: white;
    }

ex2) input 태그 중 required 속성이있는 것만 지정가능 (지정하지 않은 input에 적용시킬 땐 input:optional)

input:required{
	color: white;
    }

+

::placeholder (placeholder를 스타일링 할때)

::selection (텍스트 블록을 스타일링)

::first-letter (첫번째 문자 스타일링)

 

cf) >, +, ~ : combinators(결합자)

 

★attribute selectors 

ex1) input 태그의 type이 password 인 것만 지정

input[type="password"]{
	color:white;
    }

 

ex2) "~"사용 : password가 포함된 것만 (공백있는 하나의 단어일때)

input[type~="password"]{
	color:white;
    }

ex3) "*"사용 : password가 포함된 것만 (공백 없어도 됨)

input[type~="password"]{
	color:white;
    }

 

~="name" -> ex) first name, last name 등등
*="name" -> ex) rename, ringname, asdfajsnameadsfasdf 등등

 

 

* State (개발자도구 CSS창 Filter 옆 :hov)

  • active : 마우스로 클릭하고 있을 때 효과 적용
  • hover : 마우스가 해당 요소 위를 지나갈 때 효과를 적용
  • focus : 키보드로 선택되었을 때 효과를 적용
  • focus-within : 자식 element 중 하나가 focused 되었을 때 부모 element에게 효과를 적용
  • visited : 방문한 사이트일 경우에 효과를 적용
 
  • 조건을 나열해 여러 상황을 설정할 수 있음.
    ex)  상위 요소위에 마우스 커서가 있고, 하위 요소가 focused되었을 때 효과를 적용
high-tag:hover low-tag:focus{ 
}

 

 

* Color 사용 방식

1) hex code
: #2ecc71와 같은 색상 코드

2) rgb 
: rgb(0,140,200)

3) rgba
: 'a(alpha)'는 투명도, 0(투명)~1(불투명) 사이의 값으로 조절

 

★

CSS에서도 변수에 설정값 저장하는법 - Variable (custom properties)  

:root {
	--main-color: green;
    --default-border: 1px solid var(--main-color);
    }
    
    p {
    	background-color: var(--main-color);
        }
        
    span {
    	border: var(--default-border)
        }

설명

1. root쓰고

2. --변수이름(공백은-로채우기)

3. 사용시 var(변수명)

'코딩수강일지 > 노마드코더 코코아톡 클론코딩 수강일지' 카테고리의 다른 글

노마드코더 코코아톡 클론코딩 #6 수강일지  (0) 2023.07.03
노마드코더 코코아톡 클론코딩 #5 수강일지  (0) 2023.06.29
노마드코더 코코아톡 클론코딩 #4 수강일지  (0) 2023.06.28
노마드코더 코코아톡 클론코딩 #2 수강일지  (0) 2023.06.19
노마드코더 코코아톡 클론코딩 수강일지 #1  (0) 2023.06.15

'코딩수강일지/노마드코더 코코아톡 클론코딩 수강일지' Related Articles

티스토리툴바