본문 바로가기
반응형

Front-End/HTML&CSS

 (16)
CSS #12 (flexbox) 플렉스 박스 레이아웃 (Flexbox Layout) : 복잡한 레이아웃을 쉽게 만들 수 있는 CSS3의 레이아웃 모델- 주로 1차원 레이아웃(가로 또는 세로)에서 요소들을 유동적으로 배치하고 정렬하는 데 사용.- 항목들의 크기, 간격, 정렬을 쉽게 조정할 수 있음.- 기존의 float 이나 position 을 사용한 레이아웃보다 훨씬 더 유연하고 효율적 부모 요소(컨테이너)와 자식 요소(항목)로 나뉨.부모 요소에 display: flex를 설정, 자식 요소에 다양한 정렬 및 크기 조정을 설정 가능 display: flex : 부모 요소에 display: flex를 설정하면, 자식 요소들이 플렉스 항목이 되어 플렉스 컨테이너로 작동.container { display: flex;}.container..
CSS #11 (@media 쿼리) 웹 페이지가 다양한 화면 크기나 기기 종류에 맞게 스타일을 조정할 수 있게 해준다. 이를 통해 웹 페이지는 데스크탑, 태블릿, 모바일 등에서 자동으로 최적화된 레이아웃을 제공할 수 있다. 미디어 쿼리는 화면 크기, 해상도, 오리엔테이션(세로/가로 모드) 등을 기반으로 특정 스타일을 적용할 수 있다. ※ Media Query : 화면 크기, 해상도, 장치 타입 등에 따라 다른 CSS 스타일을 적용할 수 있도록 하는 CSS 기능@media media-type and (조건) { /* 조건이 참일 때 적용할 CSS */}media-type: 미디어 유형을 정의. (예: screen, print, all 등.)condition: 조건을 설정. (예: min-width, max-width, orien..
CSS #10 (반응형 웹, layout, @media) 웹 페이지의 레이아웃과 콘텐츠가 자동으로 최적화되어, 웹 페이지가 데스크탑, 태블릿, 모바일 등 다양한 기기에서 동일한 품질로 표시 모바일 웹 디자인 : 다양한 스마트폰과 태블릿 화면 크기에 맞춰 웹 페이지를 최적화하는 과정을 포함.디스플레이 크기 : 모바일 장치는 화면 크기가 작기 때문에, 모바일 웹 디자인은 화면 공간을 효율적으로 활용해야 함.터치스크린 인터페이스 : 모바일 기기에서 터치스크린을 사용하는 사용자 경험을 고려하여 버튼 크기, 링크 간격 등을 설계함.빠른 로딩 속도 : 모바일 데이터 네트워크를 고려해 페이지 로딩 속도가 빠르고 효율적으로 최적화되어야 함.자동 크기 조정: 반응형 웹 디자인을 적용하여, 화면 크기에 따라 컨텐츠가 자동으로 조정되도록 함. ※ viewport(뷰포트) :..
CSS #9 (CSS3 애니메이션) 웹 페이지에 동적인 효과를 추가 변형(Transform) : 모양이나 위치를 변경 (크기, 위치, 회전 / 2D, 3D)rotate(): 요소를 회전시킴. 단위는 도(degrees).scale(): 요소의 크기를 확대하거나 축소.translate(): 요소를 X축과 Y축 방향으로 이동시킴.skew(): 요소를 기울임.matrix(): 2D 변형을 한 번에 정의하는 함수, 행렬을 사용하여 변형을 적용.transform-origin : 변형이 적용되는 기준점을 설정, 기본적으로 center center로 설정, 이 속성으로 기준점을 변경 가능perspective : 3D 변형 효과를 적용할 때 원근감을 설정. 이 속성은 부모 요소에 적용하여 자식 요소가 3D 효과로 변형될 때 깊이를 조정div { tr..
CSS #8 (CSS3 선택자) CSS도 마찬가지로 CSS3로 오면서 HTML 요소에 대한 선택자가 다양하게 늘어나,훨씬 더 정교하고 강력한 스타일링을 할 수 있게 되었다. 예시 제목 강조 첫 번째 단락 강조 두 번째 단락 강조 세 번째 단락 강조 연결 선택자 : 서로 다른 관계에 있는 HTML 요소들을 선택하는 방법자식 선택자 : 부모 요소의 직접적인 자식 만을 선택후손 선택자 : 부모 요소와 그 자식 및 자손 요소에 모두 스타일을 적용형제 선택자 : 같은 부모를 가진 요소 중에서 지정한 요소 뒤에 나오는 형제만 선택인접 형제 선택자 : 특정 요소 바로 뒤에 있는 첫 번째 형제만 선택/* 자식 선택자 (..
HTML #4 (시맨틱 태그, 멀티미디어) 시맨틱 태그 html5부터 지원되는 태그, 이전까지는 div로 감쌌지만, 이제는 용도에 맞게 구분지어서 태그를 달 수 있게 되었다. header : 페이지나 섹션의 헤더를 정의. 보통 로고, 내비게이션, 제목 등이 포함 웹 페이지 제목 Home About footer : 페이지나 섹션의 푸터를 정의. 주로 저작권, 연락처, 사이트 맵 등이 포함 © 2025 My Website nav : 내비게이션 링크를 정의하는 태그, 사이트의 메뉴나 내비게이션 바 등을 포함 Home Services Contact main : 문서의 주요 콘텐츠를 감싸는 태그, 페..
CSS 기초 #7 (column, table) column 관련div { column-count: 3; /* 3개의 열로 나눔 */ column-gap: 20px; /* 열 간의 간격을 20px로 설정 */ column-rule: 2px solid black; /* 2px 두께의 검은색 선 */}div { column-count: 3; /* 3개의 열로 나누기 */ column-gap: 20px; /* 열 간 간격 */ column-rule: 1px dashed gray; /* 열 사이에 점선 */} table 관련/* 기본 표 스타일링 */table { border-collapse: collapse; /* 테이블의 경계선 처리 방식 */ border-spacing: 10px; /* 셀 사이의 간격 */ table-layout:..
CSS 기초 #6 (box, position) box 모델 콘텐츠 (Content): 실제 콘텐츠가 포함된 영역. 텍스트나 이미지 등이 이 영역에 위치.패딩 (Padding): 콘텐츠와 테두리 사이의 공간, 요소의 내부 여백. 배경색은 패딩 영역까지 적용.테두리 (Border): 요소의 콘텐츠와 패딩을 감싸는 경계선. 색상, 두께, 스타일을 설정할 수 있음.마진 (Margin): 테두리와 다른 요소 간의 공간, 외부 여백. 마진은 배경색이 적용되지 않음. ※ 마진이든 패딩이든 설정 값은 상우하좌 (시계 방향) 순으로 적용. 여백 관련 (margin / padding)/* margin (외부 여백) - 요소와 다른 요소 사이의 거리를 조정 */div { margin: 10px; /* 모든 방향에 10px 여백 */ margin: 10px 2..
반응형

티스토리툴바