목록프론트엔트 (32)

채니의 개발일기

css - 배경(background-color,background-image,background-repeat,background-position)

background-color: 요소의 배경 색상 지정 (기본: 투명, 색상:지정가능한 색상으로 설정) background-image: 요소의 배경 삽입(기본:none,ulr('경로')지정가능) div{ background-color: orange; height:300px; width:300px; background-image:url('https://i.namu.wiki/i/r1p0Hcj114_mWM3dnODq2RxaLqIuQU0YLJtWjOHIUgR5rAi-r0-vylnm6dTDHRrzXI88KAp2vcF8_hH17sfW9g.webp') } -> image를 설정했지만 div태그의 설정 크기보다 커서 화면에 제대로 출력되지않음 background-size: 배경사이즈 설정 -> background-si..
프론트엔트/HTML,CSS 2023. 7. 30. 17:44
css - display속성

CSS의 display 속성은 요소의 표시 방법을 지정하는 데 사용된다 HTML 요소는 각각 기본적인 특성을 가지며, 이러한 속성을 display 속성을 사용하여 변경할 수 있다. 인라인과 블록요소 설명↓↓↓↓ 2023.07.16 - [프론트엔트/HTML,CSS] - CSS:너비(width, height), 인라인과블록요소 CSS:너비(width, height), 인라인과블록요소 너비 너비는 모두 기본값은 auto(브라우저가 넓이 계산)으로 지정 width: 가로넓이 height: 세로넓이 인라인,블록요소 인라인요소: 포함한 컨텐츠 크기만큼 자동으로 크기조절가능 ex)span태그 -> 자동 xcwaonvy.tistory.com 각요소가 이미 지정되어있는값 block: 요소를 블록 레벨 박스로 지정. 너비..
프론트엔트/HTML,CSS 2023. 7. 30. 16:32
CSS - 가상클래스 (first-child,last-child,nth-child,부정선택자)

복합선택자를 활용하여 자식선택자 선택가능 복합선택자 관련 글 ↓↓↓↓↓ 2023.07.16 - [프론트엔트/HTML,CSS] - css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자) css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자) 기본선택자 This is a paragraph. This is an inline element. This is a block element. CSS 기본 선택자는 모든 요소를 선택합니다. *를 활용해 전체선택 * { color: red; } 태그 선택자는 특정 태그의 요소를 선택합니다. xcwaonvy.tistory.com fist-child :특정 요소의 첫 번째 자식 요소를 선택하는 데 사용되는 가상 클래스 선택자 : 이 선택자는 해당 요소가 형제 요소 ..
프론트엔트/HTML,CSS 2023. 7. 24. 22:21
CSS - 가상클래스 (:hover, :active,:focus)

:hover 마우스 커서가 올라가거나 포커스를 받았을 때 스타일을 변경하는데 사용됩니다. 즉, 사용자가 요소 위로 마우스 커서를 올릴 때 또는 키보드 포커스가 해당 요소에 있는 경우, hover 상태가 발생합니다. :hover 사용예시 .box{ height:100px; width:100px; background-color:orange; transition:1s; } .box:hover{ width:300px; background-color:royalblue; } :active 사용자가 요소를 마우스 클릭하는 동안 해당 요소가 :active 상태가 됩니다. 이 링크를 클릭해보요. a:active { color: red; text-decoration: none; } focus 사용자가 요소를 선택하거나 포..
프론트엔트/HTML,CSS 2023. 7. 19. 19:15
CSS- margin

CSS에서 margin은 요소 주위의 공간을 조절하는 속성입니다. margin을 사용하여 요소의 상하좌우에 여백을 추가하거나 감소시킬 수 있습니다. margin 속성의 기본값은 0입니다. 이는 요소 주위에 어떠한 여백도 적용하지 않음을 의미합니다. auto 값은 브라우저가 자동으로 여백을 계산하여 요소를 가운데 정렬하는 데 사용될 수 있습니다. 이는 주로 블록 요소를 가운데로 정렬하는 데 유용합니다. -> margin-left와 margin-right를 auto로 준값 = magin: auto; 해도 같은값이나옴 margin의 단축속성 선택자 { margin: 상단 우측 하단 좌측; } 1) div { margin: 10px 20px 30px 40px; } -> 상단 여백을 10픽셀, 우측 여백을 20픽..
프론트엔트/HTML,CSS 2023. 7. 18. 23:41
HTML - 절대경로 상대경로

상대경로 ./" (현재 디렉토리): "./"은 현재 작업 중인 디렉토리를 나타냅니다. 이것은 일반적으로 현재 파일이 위치한 디렉토리를 의미합니다. 예를 들어, 현재 디렉토리에 있는 "image.jpg"라는 파일을 참조하려면 다음과 같이 사용할 수 있습니다: "../" (상위 디렉토리): "../"는 현재 디렉토리의 상위 디렉토리를 나타냅니다. 이것은 파일이나 폴더를 현재 디렉토리보다 한 단계 위의 디렉토리에서 찾을 때 사용됩니다. 예를 들어, 현재 디렉토리의 상위 디렉토리에 있는 "styles.css"라는 파일을 참조하려면 다음과 같이 사용할 수 있습니다: 절대경로 "/" (루트 디렉토리): "/"는 웹 서버의 루트 디렉토리를 나타냅니다. (루트 경로는 파일 시스템이나 웹 서버에서 최상위 디렉토리 또는 ..
프론트엔트/HTML,CSS 2023. 7. 18. 20:02
이전 Prev 1 2 3 4 5 6 Next 다음