[포스코X코딩온] CSS_06 Transition/Transform/Animation

transition : 요소의 값이 변할 때마다 전환되는 모션을 추가하는 속성이다. transition은 속성 자체로 스타일을 주는 속성이 아니라 가상 클래스 (ex. :hover) 나 자바스크립트의 부가적인 액션에 의해 사용된다. transition: 속성명 지속시간 타이밍함수 대기시간; transition-property : 효과를 적용할 속성 이름 지정 all : 모든 속성에 지정 속성 이름 : 전환 효과할 속성 이름 지정 - 여러 개 지정할 시 쉼표(,) 로 구분 transition-duration : 전환 효과의 지속시간 지정 os : 전환효과x 시간 : s 지정 transitio-timing-function : 전환 효과의 타이밍 함수 지정 ease 느리게-빠르게-느리게 cubic-bezier..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 9.
• textsms

[포스코X코딩온] CSS_05 flex

flex 구조 flex 구조는 item이 설정된 속성에 따라 container 안에서 배치된다. display: flex; flex컨테이너를 사용하기 위해서는 display: flex; 를 정의한다. 각각의 아이템은 자신의 너비만큼 공간을 차지하고 높이는 컨테이너의 높이만큼 공간을 차지한다. 배치할 축을 main axis를 주축으로, cross axis 를 교차축으로 정렬한다. .container{ /* - main axis : 주축 (주축의 기본방향 좌 -> 우) - across axis : 교차축 */ display: flex; } flex-direction : 주축(main axis) 방향 설정 아이템이 배치되는 축을 좌->우 / 우-> 좌 / 위->아래 / 아래-> 위 로 지정한다. flex-di..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 7.
• textsms

[포스코X코딩온] CSS_04 position & backgound

position 속성 static : 기본값 position : static; 기본값으로 position을 지정하지 않으면 요소가 차례대로 쌓인다. absolute : 위치 상 부모 요소를 기준 부모 요소 기준으로 top, bottom, left, right 만큼의 이동할 위치가 결정된다. 이미 위치가 정해져 있는 요소의 부모가 있는 위치에서부터 위치가 움직인다고 생각하자. relative : 요소 기준으로 지정 top, bottom, left, right 로 위치 조절이 가능하다. static 과의 차이점은 좌표(top, bottom, left, right)의 동작 여부이다. 쉽게 static은 위치를 지정하지 않은 것이다. fixed : 브라우저 기준 요소가 항상 고정된 위치에 있게 하는 요소이다. ..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 7.
• textsms

[포스코X코딩온] CSS_03 속성 정리

Font 속성 font-weight - 글자의 두께를 정하는 속성 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 font-size : 글자의 크기 16px : 기본 크기 단위 : px, ex, rem 등 단위로 지정 % : 부모 요소의 폰트 크기에 대한 비율 smaller : 상위 요소보다 작은 크기 lager..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 6.
• textsms

[포스코X코딩온] CSS_02 선택자

기본 선택자 가장 기본적인 선택자로 요소를 호출할 때 사용합니다. 전체 선택자 * HTML문서 내부의 모든 요소를 선택하는 선택자 * { color: skyblue; } 태그 선택자 태그 이름을 선택하는 선택자 노란색 li { background-color: yellow; color: blue; } 클래스 선택자 HTML clss 속성의 값 선택자 빨간색 주황색 .red { background-color: red; } .orange { background-color: orange; } 아이디 선택자 id 속성의 값 선택 초록색 #green_i { background-color: green; } 선택자 우선순위 : 전체 < tag < class < id 빨간색 주황색 클래스 지정 X 하늘색 초록색 li 태..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 5.
• textsms

[포스코X코딩온] CSS_01 적용 방식

css : html 태그에 디자인을 넣어주는 언어 선택자 : 태그, id, class 에 스타일 적용 인라인 방식 인라인 방식 각각의 태그마다 적용 시켜야하고 재사용이 불가능합니다. 내장 방식 태그 내부에 사용할 style을 미리 선언하여 태그에 같은 스타일을 적용할 수 있습니다. 다만, 해당 html 에서만 사용할 수 있습니다. 링크 방식 스타일을 하나의 css 파일에 넣고, html 파일에서 css 파일을 링크해서 사용합니다. 재사용과 스타일 변경이 생겨도 무관합니다. @import 방식 css의 @import 규칙으로 css 문서 안에서 또 다른 css 를 가져와 연결하는 방식입니다. @import url(./ex1_import.css); p{ background-color: red; color: ..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 3.
• textsms