study 코딩하자

웹 사이트에서의 이미지 표현법 1. HTML 태그를 통해서 표현 2. CSS 속성을 통해서 표현 3. 이미지 스프라이트 기법으로 표현 HTML 태그를 통해서 표현 HTML에서 태그를 시용해서 이미지를 표현할 수 있습니다. 태그를 사용할 때 src 특성을 필수적으로 사용해야 하며 src 특성은 표현할 이미지로의 경로를 지정합니다. 주로 의미가 있는 이미지(로고, 메뉴)를 표현할 때 사용하며 alt를 사용해 대체 문자를 표현합니다. CSS 속성을 통해서 표현 CSS에서 background-image 속성을 사용해서 이미지를 표현할 수 있습니다. background-image 속성을 사용할 때 url 을 지정해 표현할 이미지로의 경로를 지정합니다. 주로 의미가 없는 이미지(배경, 색표현)를 표현할 때 사용하며..

float float 속성은 block구조 요소 좌우에 다른 요소를 배치할 수 있게 하며 주로 레이아웃을 만들 때 사용한다. float의 값 left: 요소가 자신의 포함 블록의 좌측에 위치해야 함을 나타내는 키워드 right: 요소가 자신의 포함 블록의 우측에 위치해야 함을 나타내는 키워드 none: 요소가 부동하지 않아야 함을 나타내는 키워드 inline-start: 요소가 자신의 포함 블록의 시작 쪽에 위치해야 함을 나타내는 키워드 inline-end: 요소가 자신의 포함 블록의 끝쪽에 위치해야 함을 나타내는 키워드 float의 버그 float의 버그로는 특정 float된 요소의 부모 요소가 자식 요소인 float 된 요소의 높이(height) 값을 인지하지 못해 영역 깨짐 현상이 나타난다. flo..

ir(Image Replacement) 효과란? background 속성으로 이미지를 표현할 때 가상으로 대체 문자를 만들어주기 위해(웹 표준 준수 목적) ir효과를 사용한다. ir효과의 종류 ir_pm 의미 있는 이미지의 대체 텍스트를 제공하는 경우 사용하며 이미지를 대체할 요소를 배경이미지로 설정하고 텍스트는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 한다. 예시 .ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } ir_wa 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용하며 이미지를 대체할 요소에 배경 이미지를 설정하고..

GRID CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소 간의 관계를 정의하는데 아주 탁월한 속성입니다. 플렉스는 한 방향 레이아웃 시스템이고 그리드는 두 방향(가로, 세로) 레이아웃 시스템이기 때문에 플렉스보다 더 복합적인 레이아웃을 표현할 수 있습니다. grid 기본 문법 구조 div .container가 부모 요소가 되고 하위 요소인 div. item은 자식 요소가 됩니다. grid 속성 grid-area grid item의 크기와 위치를 설정해 grid를 배치합니다. grid-auto-columns grid container의 크기가 설정되지 않은 열에 대한 기본 크기를 설정합니다. grid-auto-fl..

margin과 padding margin margin 속성은 요소의 바깥쪽 여백을 설정한다. 정의 margin-top 속성은 요소의 위쪽 바깥쪽 여백을 설정 margin-right 속성은 요소의 오른쪽 바깥쪽 여백을 설정 margin-bottom 속성은 요소의 아래쪽 바깥쪽 여백을 설정 margin-left 속성은 요소의 왼쪽 바깥쪽 여백을 설정 margin: 10px 11px 12px 13px; : 위 : 10px, 오른쪽 : 11px, 아래 : 12px* 왼쪽 : 13px margin: 10px 11px 12px; : 위 : 10px, 왼쪽, 오른쪽 : 11px, 아래 : 12px margin: 10px 11px; : 위,아래 : 10px, 왼쪽, 오른쪽 : 11px margin: 10px; : 위,..

Flex Flex(플렉스)는 Flexible Box, Flex Box라고 부르기도 합니다. 레이아웃 배치 전용 기능으로 고안되었기 때문에 float나 inline-block등 기존에 레이아웃을 만들 때 썼던 방식보다 강력하고 편리한 기능들이 많습니다. flex기본 문법 구조 Flexbox는 상위 부모 요소인 flex container와 그 복수의 자식 요소인 flex item으로 구성됩니다. div .container가 부모 요소가 되고 하위 요소인 div .item은 자식 요소가 됩니다. flex 속성은 크게 컨테이너(부모) 속성과 아이템(자식)속성 두가지로 나누어집니다. flex container(부모 속성): flex-direction, flex-wrap, justify-content, align-..

CSS 단위 1. px: px단위는 화소 1개의 크기를 의미한다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않습니다. 2. %: % 는 백분율 단위의 상대 단위이며 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정합니다. 3. em: em은 배수 단위로 상대 단위이며 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정한다. 지정된 사이즈에 em의 값만큼 곱해서 계산합니다. 4. rem: rem에서 r은 root(최상위)를 뜻한다. 최상위의 태그에서 지정한 사이즈에 rem의 값만큼 곱해서 계산한다. 5. vh: vh는 Viewport height의 축약어이며, Viewport는 웹사이트에서 보이는 영역을 뜻합니다. 속성 값이 1vh 일 경우 뷰포트 넓이의 1%만..