□ HTML과 CSS의 연결

※ style는 HTML의 문법이다.

- <style></style> 사용 :

 

- 특정 태그에 style속성 값 부여

 

□ 선택자와 선언


선택자 연습 : https://flukeout.github.io

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

 

- 선택자의 종류

  • 태그 선택자
    ex) li란 태그를 모두 선택하여 style 값 부여
  • 아이디 선택자
    ex) #select로 id="select"인 아이디에 style 값 부여
  • 클래스 선택자
    ex) .deactive로 class="deactive"인 클래스에 style 값 부여

    ※ 식별을 위해 id/class 는 반드시 나누어져야 한다(class가 국가라면 id는 주민번호[고유]와 비슷한 의미를 가진다)

  • 부모/자식 선택자 : '>'기호를 통해 특정 부모의 직계 자식 요소를 선택한다.

  • 가상클래스 선택자(pseudo class selector) : 특정 상태에 스타일을 적용할 때 사용(순차적용)
    1. link : 방문하지 않은 링크 스타일 적용
    2. visited : 방문한 링크 스타일 적용
    3. hover : 사용자가 요소 위에 마우스를 올렸을 때 적용
    4. active : 요소가 활성 상태일 때 적용(클릭 등)
    5. focus : 요소가 포커스를 가졌을 때 적용

□ 빈도수 높은 속성들

- font-size

  • (★) rem : 문서의 루트 요소의 글꼴 크기를 기준을 한 상대 단위, 전역적인 상대 크기
  • px : 고정된 픽셀 단위, 디바이스 해상도와 관계없이 고정된 크기.
  • em : 부모 요소의 글꼴 크기를 기준으로 한 상대 단위, 부모 요소에 비례

- color

    • rgb(RedGreenBlue) 
    • colorname 
    • hex(Hexadecimal Colors)

- text-align(정렬)

 

  • left : 왼쪽 정렬
  • center : 가운데 정렬
  • right : 오른쪽 정렬
  • justify : 맞춤 정렬

- font

  • font-familly : 글꼴 지정
  • font-weight : 진하게
  • line-height : 자간(줄간격)
  • font : 폰트와 관련된 여러 속성을 축양형으로 표현하는 속성 순서를 지켜  기술하여야 함
    형식 : 
    font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 
    ※ 위 두개의 코드는 같은 의미이다.

□ 상속

html 전역에 color:red를 적용시키면 그 아래에 태그들이 상속받아 color이 적용된다.

그중 특정 태그에만 적용시키면 해당 태그는 직접 적용한 값이 적용된다.

 

상속 태그별 여부 : https://www.w3.org/TR/CSS21/propidx.html

 

Full property table

 

www.w3.org

□ 캐스케이딩 : 스타일 규칙이 적용되는 우선순위

아래와 같은 순으로 우선순위가 적용된다.

  1. !important
  2. 인라인 스타일
  3. id 선택자
  4. 클래스 선택자
  5. 기본 요소 선택자

□ inline - block 레벨

 

- inline level element : 화면의 일부를 차지하는 태그

- block level element : 화면 전체를 사용하는 태그

□ box model

- margin : 마진은 요소의 외부 여백을 조절하는 데 사용됩니다.

                즉, 요소와 주변 요소 사이의 공간을 말합니다.

                마진을 설정하면 요소가 주변 요소로부터 얼마나 멀리 떨어져 있는지 결정할 수 있습니다.

                마진은 요소의 크기에 영향을 미치지 않으며, 단지 요소 사이의 간격을 조정하는 데 사용됩니다.

 

- padding : 패딩은 요소의 내부 여백을 조절하는 데 사용됩니다.

                  즉, 요소의 테두리와 내용 사이의 공간을 말합니다.

                  패딩을 설정하면 요소의 내용이 테두리에서 얼마나 멀리 떨어져 있는지 결정할 수 있습니다.

                  패딩은 요소의 크기에 영향을 미치지 않으며, 단지 내부 여백을 조정하는 데 사용됩니다.

□ box-sizing  

  • content-box; : 요소의 너비와 높이가 해당 content만을 포함하도록 계산, 패딩과 테두리가 요소의 크기에 영향을 미치
                           지 않음
  • border-box; : 요서의 너비와 높이가 content뿐만 아니라 패딩과 테두리 까지 포함하여 계산됨

□ 마진 겹침

 

□ 포지션

- static(기본값) : position: static;은 요소를 문서 흐름에 따라 배치합니다.

                          즉, 위치가 지정되지 않은 경우 기본적으로 적용되는 값입니다.

                          위치를 조정하기 위해 top, right, bottom, left 속성을 사용할 수 없습니다.

 

- relative : position: relative;는 요소를 자신의 기본 위치에서 상대적으로 이동시킵니다.

                즉, 요소를 일반적인 문서 흐름에 따라 배치하지만, 추가적인 위치 이동을 할 수 있습니다.

                top, right, bottom, left 속성을 사용하여 이동할 거리를 지정할 수 있습니다.

                다른 요소들의 위치에는 영향을 주지 않고 자신을 기준으로 상대적인 위치 이동이 발생합니다.

 

- absolute : position: absolute;는 요소를 문서 흐름에서 제거하고,

                  부모 요소 중 위치 속성이 static이 아닌 첫 번째 요소에 대해 상대적으로 배치합니다.

                  만약 이런 조상 요소가 없으면 <html> 요소를 기준으로 합니다.

 

- fixed : position: fixed;는 요소를 뷰포트(viewport) 기준으로 위치를 고정합니다.

            즉, 스크롤되더라도 화면에 고정되어 있는 위치에 요소를 배치합니다.

            fixed로 위치가 지정된 요소는 다른 요소들에 대한 영향을 받지 않으며,

            다른 요소들도 해당 요소에 영향을 주지 않습니다.

 

□ flex


- flex 연습 - https://opentutorials.org/module/2367/13526

 

flex - CSS

CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과

opentutorials.org

 

- holy grail layout

- container

  • display
  • flex-direction
    1. row : 수평(좌 → 우)
    2. column : 수직(위 → 아래)
    3. row-reverse : 수평반전(우 → 좌)
    4. column-reverse : 수평반전(아래 → 위)
  • flex-wrap
  • flex-flow
  • jusify-content : Flexbox나 Grid 레이아웃에서 요소들을 주축(main axis)을 따라 정렬
  • align-items : Flexbox나 Grid 레이아웃에서 단일 행(row)이나 열(column) 내의 항목을 교차축(cross axis)을 따라 정렬
  • align-content : Flexbox나 Grid 레이아웃에서 여러 행(row)이나 열(column)을 교차축(cross axis)을 따라 정렬

 

- item

  • order
  • flex-grow : 여백을 나누어 가지는 명령어
    캐스케이딩에 의해 2번에 2/6을 할당 나머지에 각 1/6씩 할당
  • flex-shrink : Flexbox 레이아웃에서 flex 아이템이 컨테이너 내에서 작아질 수 있는 정도를 제어하는 속성.
                       이 속성은 flex 컨테이너의 공간이 부족할 때 flex 아이템이 얼마나 줄어들 수 있는지를 결정
    flexbox의 경계
    경계 이하로 줄어들 때 1,2가 분담하여 줄어듬
  • flex-basis : flex의 방향에 해당하는 크기를 지정
  • flex
  • align-self

□ Multi column

- column-count : 요소를 몇 개의 컬럼으로 나눌지 지정

- column-width : 각 컬럼의 너비를 지정

- column-gap : 컬럼 간 간격을 설정

- column-span : 특정 요소가 여러 컬럼을 가로지르게 설정(all / none)이 있음

- column-rule-(1~3)

  1. style : 컬럼 사이에 그려지는 선의 스타일을 지정
  2. width : 컬럼 사이의 선의 두께를 지정
  3. color : 컬럼 사이의 선의 색상을 지정

 

□ Media query

미디어 쿼리(Media Query)는 웹 페이지의 스타일을 다양한 디바이스나 화면 크기에 따라 다르게 적용할 수 있게 해주는 CSS 기술, 미디어 쿼리는 조건을 설정하고, 그 조건이 만족될 때만 특정 스타일이 적용함

  • max-width: 최대 너비. 지정된 값 이하일 때 스타일을 적용
  • min-width: 최소 너비. 지정된 값 이상일 때 스타일을 적용
  • max-height: 최대 높이. 지정된 값 이하일 때 스타일을 적용
  • min-height: 최소 높이. 지정된 값 이상일 때 스타일을 적용
  • orientation: 장치의 방향. portrait (세로) 또는 landscape (가로)로 설정할 수 있습니다.
  • resolution: 장치의 해상도. DPI (dots per inch) 또는 DPCM (dots per cm)로 설정할 수 있습니다.

미디어 쿼리 참고 사이트 : https://www.w3schools.com/cssref/css3_pr_mediaquery.php

 

CSS @media Rule

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

□ background

- background-(1~6)

  1. color : 배경 색상
  2. image: url('url') : 배경 이미지
  3. repeat: (no-repeat / repeat-x / repeat-y) : 배경 이미지 반복여부를 지정(기본값 - repeat)
  4. attachment: (scroll / fixed / local) : 배경 이미지의 스크롤 동작을 지정 
  5. size: (cover / contain)
  6. position : 배경 이미지 시작위치 지정

※ 축약형 : 배경색상: 빨강, 배경이미지: image.jpg, 반복하지 않음, 고정, 중앙 정렬, 커버 크기

 

□ filter

  • blur(px) : 요소를 흐리게 만듬
  • brightness(%) : 요소의 밝기를 조절
  • contrast(%) : 요소의 대비를 조절
  • graysclae(%) : 요소를 흑백으로 만듬
  • hue-rotate(deg) : 요소의 색조를 회전
  • invert(%) : 요소의 색상을 반전시킴
  • opacity(%) : 요소의 투명도를 조절
  • saturate(%) : 요소의 색상 채도를 조절
  • sepia(%) : 요소에 세피하 효과를 줌

※ filter는 조합해서 사용 가능
    ex) filter: blur(5ps) brightness(150%) contrast(200%);

□ transform

요소의 형태를 변경할 때 사용하는 속성

이 속성을 사용하면 요소를 회전시키거나, 크기를 조정하거나, 기울이거나, 이동시킬 수 있다.

transform 속성은 다양한 함수와 함께 사용되어 여러 가지 효과를 낼 수 있다.

 

다양한 transform 활용 : https://codepen.io/vineethtrv/pen/XKKEgM

 

Css3 Transform

CSS3 Transform models ...

codepen.io

 

transform 단위 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform

 

transform - CSS: Cascading Style Sheets | MDN

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

developer.mozilla.org

 

- transform-origin : transform의 기준점을 정하고 싶을 때 사용

※ 직접적으로 화려한 transform을 구현하는건 힘드므로 구글링을 통해 css transform library같이 검색하여 활용

□ transition

요소의 스타일 변화를 부드럽게 애니메이션으로 보여주기 위해 사용하는 속성

 

https://matthewlein.com/tools/ceaser

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them

matthewlein.com

 

□ link와 import

외부 스타일시트를 포함하거나 다른 CSS 파일을 불러오는 방법

- link(☆)

HTML 문서의 <head> 섹션에 삽입되어 외부 CSS 파일을 불러옵니다.

브라우저가 HTML을 읽을 때 link 태그를 만나면, 해당 CSS 파일을 즉시 다운로드하고 적용합니다.

link 태그는 HTML의 표준 방식으로 외부 스타일시트를 포함하는 방법입니다.

 

- import

CSS 파일 내에서 다른 CSS 파일을 불러올 때 사용합니다.

@import는 CSS 파일의 맨 위 또는 다른 스타일 규칙보다 먼저 위치해야 합니다.

@import는 종종 하나의 CSS 파일에서 다른 CSS 파일들을 계층적으로 불러오기 위해 사용되지만, 성능 면에서 link 태그보다 비효율적일 수 있습니다.

이는 @import가 스타일시트를 나중에 불러오기 때문입니다.

 

주요 차이점

  1. 속도: link 태그는 HTML 문서를 읽을 때 CSS 파일을 병렬로 불러오기 때문에 페이지 로딩 속도가 빠릅니다.
    반면 @import는 CSS 파일을 순차적으로 불러오기 때문에 페이지 로딩 속도가 느려질 수 있습니다.
  2. 지원: link 태그는 모든 HTML 문서에서 사용할 수 있으며, 스타일시트를 HTML의 메타데이터로 포함할 수 있습니다.
    반면, @import는 CSS 파일 내에서만 사용 가능합니다.
  3. 조건부 로딩: link 태그는 미디어 쿼리를 사용하여 특정 조건에서만 스타일시트를 불러올 수 있습니다.
    예를 들어, 화면 크기나 장치 유형에 따라 다른 CSS 파일을 로딩할 수 있습니다.
  4. 사용의 편의성: @import는 여러 CSS 파일을 논리적으로 그룹화하고 관리하기 쉬운 방법을 제공합니다.
    이는 특히 큰 프로젝트에서 유용할 수 있습니다.

□ fontello

https://fontello.com/

 

Fontello - icon fonts generator

This site will not work if cookies are completely disabled. {"assets_hash":"e282f478ff36cef0fd98943c37b1f54b","page_data":{},"locale":"en-US","layout":"fontello.layout"}

fontello.com

 

https://thenounproject.com/

 

Noun Project: Free Icons & Stock Photos for Everything

Iconathon Redefining Women Collection

thenounproject.com

 

 

 

 

 

출처 : 생활코딩 유튜브 : https://www.youtube.com/@coohde

 

생활코딩

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa

www.youtube.com

 

'웹' 카테고리의 다른 글

4일차 - Javascript 비동기처리  (0) 2024.07.18
4일차 - JavaScript  (0) 2024.07.18
개발로드 2-3. 프론트앤드 기본 지식(JavaScript)  (0) 2024.05.28
개발로드 2-2. 프론트앤드 기본 지식(CSS선택자)  (0) 2024.05.16
개발로드 2-1. 프론트앤드 기본 지식(HTML)  (0) 2024.05.12

티스토리툴바