Frontend/HTML, CSS17 [CSS] 레이아웃 ** 플렉서블 박스 레이아웃 플렉서블(플렉스) 박스 레이아웃 : 1차원 방식으로 다양한 상황에서 유연하게 레이아웃을 구성할 수 있게 다양한 속성 제공 ※ 구성 요소 - 주축 (main axis) : 플렉스 박스의 진행방향과 수평한 축 - 교차축 (cross axis) : 주축과 수직한 축 - 플렉스 컨테이너 (flex container) : display 속성값으로 flex나 inline-flex가 적용된 요소 - 플렉스 아이템 (flex item) : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소 1. display 속성 display : flex; /* 적용된 요소의 다음 요소가 항상 줄 바꿈됨 */ display : inline-flex /* 다음 요소가 주변에 배치되게 함 */ display 속.. 2023. 7. 16. [CSS] 전환효과, 애니메이션 속성, 변형효과, 웹폰트/아이콘폰트 전환이란? CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것. 1) transition-property 속성 transition-property: ; 속성값에 들어갈 수 있는 값 none : 전환효과 속성 지정X all : 모든 속성을 전환 효과 대상으로 봄 transition-property : background-color, color, width; 처럼 속성을 지정 2) trasition-duration 속성 초단위의 속성값을 사용해 전환효과의 지속 시간을 설정 초단위로 s, ms등을 사용. ++ 어떤 요소에 전환효과를 넣으려면 반드시 transition-property와 transition-duration 속성을 함께 사용해야 함. 3) transition-delay 속.. 2023. 7. 16. [CSS] 배경, 위치 ** * background-color 속성 : 배경에 색상을 넣을 수 있음. * background-image 속성 : 이미지를 넣을 수 있다. background-image:url('이미지 경로'); 로 설정할 수 있다. !! 주의사항 !! 1. 배경 크기가 반드시 있어야 함. (width와 height의 값도 있어야 함) 2. 이미지의 크기가 요소의 배경크기와 맞지 않으면 어색하게 보인다. * background-repeat 속성 요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로 반복해서 채운다. 이미지 반복 설정을 바꾸려면 사용 no-repeat / repeat-x / repeat-y / repeat / round / space 이미지 반복X , 가로 방향으로 반복 X, 세로 방향으로 반.. 2023. 7. 16. [CSS] 박스 모델 속성 박스모델 : HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지에 대한 것 : 모든 HTML 요소가 사각형의 박스로 둘러쌓여 있다는 개념 -> 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지의 본질!! 4가지 요소로 구성 1) margin : 요소의 외부 여백 2) border : 요소의 테두리(경계선) 3) padding : 요소의 내부 여백 4) content : 요소의 내용 ** margin 영역 ** 외부여백 담당 top, right, bottom, left순으로 속성값을 결정함. 각각의 값을 설정할 수 있고, margin 속성값을 공백으로 구분해 4개를 적으면 위의 순서대로 적용됨. margin 겹침 현상 : .. 2023. 7. 16. [CSS] 필수 속성 다루기(색상, 텍스트, 단위, 적용순서) ** CSS 언어의 특징 (Cascading Style Sheets : 단계적으로 적용되는 스타일의 언어) 1) 기본 스타일 시트 (참고로) HTML 태그는 태그 자체에는 꾸밈 담당 역할이나 기능은 X 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있음 2) 적용 우선순위와 개별성 기본 스타일보다 사용자 속성이 더 우선적. 같은 태그 요소의 선택자가 여러개일때 마지막에 작성한 것이 우선 적용, 하나만 적용 개별성은 어떤 스타일이 마지막에 영향을 주는지를 말하는 것. 개별성 규칙의 점수가 큰 순서대로 적용이 됨. (우선순위) 선택자 예시, 종류 점수 전체 선택자 * 0 태그 선택자 div, p, hn들 1 가상 요소 선택자 :: before, :: after 1 클래스 선택자 .box , .title 10 가.. 2023. 7. 16. [CSS] 선택자 다루기 기본 선택자 사용하기 1) 전체 선택자 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용해 표시 * { /*CSS 코드 */ } // CSS 코드 부분은 선언부라고 함! 여기서 모든 요소는 html, head, body, style 태그까지 모든 요소가 선택되는 것이다. 2) 태그 선택자 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다. 태그명 { /*CSS 코드 */ } 3) 아이디 선택자 HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정하는 방법 #id 속성값 { /*CSS 코드 */ } id 속성값은 고유해야한다. 4) 클래스 선택자 class 속성값을 이용해 선택자를 지정하는 방법 .class 속성값 { /* CSS 코.. 2023. 7. 16. 이전 1 2 3 다음
