본문 바로가기
728x90
SMALL

전체 글100

[CSS] 포지션 속성(부모요소, 자식요소) * CSS 포지션 속성부모 요소 Relativerelative는 absolute로 배치된 자식 요소의 기준점을 설정하기 위해 사용된다.자식 요소가 absolute로 설정된 경우, relative로 설정된 부모 요소를 기준으로 위치가 결정된다. 자식 요소  Absoluteabsolute는 특정 위치에 요소를 배치해야 할 때 유용하다. 예를 들어, 팝업 메뉴, 툴팁, 모달 창 등을 화면의 특정 위치에 고정할 때 사용된다.absolute로 설정되면 top, right, bottom, left 속성을 사용해 지정된 조상 요소를 기준으로 이동한다. * 코드 예시 position: relative;를 제거. 부모 요소가 브라우저로 적용되어 출력. * 포지션 속성을 통해 자식요소 위치시키기top: 0; left: 0.. 2024. 7. 25.
[HTML5] 시맨틱 태그 * 시맨틱 태그가장 상위 컨테이너: .container, .wrapper주요 내용: main주제별 컨텐츠 영역: section헤더: header제작 및 저작권 정보: footer컨텐트 내용: article문서 링크 탐색: nav세부 사항: summary추가 세부 정보: details .container > header, section, footer > article > div * 시맨틱 태그로 CSS 레이아웃 설계하기/* 컨테이너 스타일 */.container { border: 1px solid red; /* 빨간색 테두리 */ width: 1200px; /* 너비 1200px */ margin: auto; /* 가운데 정렬 */}/* 헤더 스타일 */header { backgrou.. 2024. 7. 25.
[CSS] 가로 배치(float, overflow, clear, inline-block) * floatnone(default): float 속성 적용 안 함left: 컨테이너의 왼쪽에 배치right: 컨테이너의 오른쪽에 배치margin: auto 요소를 중앙에 배치 코드 예시 자식 요소에 float 적용 자식 요소에 float 속성이 사용되면 부모요소는 자식요소가 없다고 판단하여 높잇값(height)을 잃는다. * 높잇값 찾기 overflow: hidden;부모요소에 overflow: hidden;을 추가하였더니 높이값이 없어지지 않는 것을 알 수 있다.  float: right; 로 오른쪽 배치  span 태그는 인라인요소이기 때문에 크기값을 갖지 못하기에, 인라인블록요소로 변경하여서 width와 height 적용하였다.margin: auto; 는 블록요소에만 적용되기에 중앙배치가 되지 않.. 2024. 7. 23.
[HTML/CSS] 인라인 요소, 블록 요소, 인라인 블록 요소 * 정리 * 인라인(inline) 요소 인라인 요소는 기본적으로 가로 배치.크기값을 가질 수 없기에 width와 height 적용 안됨.좌우 마진은 갖지만 상하 마진은 가질 수 없음. * 블록(block) 요소블록 요소는 기본적으로 세로 배치.width와 height 적용 가능.상하좌우 모두 마진을 가질 수 있음. * 인라인 블록(inline block) 요소css 코드의 주석을 보면, 인라인 요소와 블록 요소 성질을 모두 가지고 있는 것을 확인할 수 있다. * 요소 변경: display 속성값: block, inline-block, inline, none, flex  display: inline-block으로 인라인 요소를 인라인블록요소로 변경.상하좌우 마진 모두 적용됨.width 적용됨. 2024. 7. 22.
[CSS] 그림자 효과(box-shadow, text-shadow) * box-shadowinset: 안쪽 그림자offset-x: 수평 그림자의 offset 값offset-y : 수직 그림자의 offset 값blur: 그림자 가장자리를 부드럽게 처리color: 색상 지정 코드 예시 * text-shadow코드 예시 코드 예시 2 2024. 7. 22.
[CSS] 박스 모델(border, border-redius, padding, margin) * border: 테두리 설정border-style: 테두리 스타일 지정value: solid, dashed, dotted, double, groove, inset, outset border-width: 테두리 두께 지정value: px, %, thin, medium, thick border-color: 테두리 색상 지정value: color 코드 예시 1오른쪽 코드처럼 border 속성을 한 줄에 한 번에 쓸 수도 있다.   코드 예시 2 코드 예시 3상하좌우 속성을 따로 지정할 수 있다. * border-radius: 엘리먼트 코너 둥글게 하기  * padding, margin크기 값을 2개 사용하는 경우: 상하, 좌우ex) margin 30px, 50px; 크기의 값을 4가지 사용할 경우: 상, 우.. 2024. 7. 22.
728x90
LIST

티스토리툴바