babydevelopbabydevelop

포지션 position 속성 position 속성은 HTML 요소가 위치를 결정하는 방식을 설정합니다. CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다. 1. 정적 위치(static position) 지정 방식 2. 상대 위치(relative position) 지정 방식 3. 고정 위치(fixed position) 지정 방식 4. 절대 위치(absolute position) 지정 방식 정적 위치(static position) 지정 방식 HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다. position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다..

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 content-box border-box 둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리..

웹폰트 적용하기 눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용한다 @font-face { font-family: 'SDSamliphopangche_Outline'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff') format('woff'); font-weight: normal; font-style: normal; } 적용 body { font-family: 'SDSamliphopangche_Outline'; } Google Fonts 적용 body { font-family: 'Roboto', sans-serif; } 폰트 파일 적용하기 파일을 다운..

CSS 글꼴 CSS를 사용하면 웹 페이지에 나타나는 글꼴(Font)을 다양하게 설정할 수 있습니다. CSS에서 사용할 수 있는 font 속성은 다음과 같습니다. 1.font-family 2.font-style 3.font-variant 4.font-weight 5.font-size CSS 글꼴 집합(font-family) CSS에는 두 가지의 글꼴 집합(font family)이 존재합니다. - generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("Times", "Courier" 등) font-family 속성 font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 ..

CSS 그리드 레이아웃(Grid Layout) 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. 그리드(grid) 속성들! grid grid의 속성들을 한번에 일괄적용 할 수 있는 속성입니다. grid-area grid-area 속..

CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용합니다. Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 예를 들어, 웹페이지 상의 모든 요소의 글꼴 두께를 스타일하기 위한 CSS 코드는 다음과 같습니다. strong { font-weight: 500; } Class Selector 타입 선택자와 더불어 가장 많이 사용되는 CSS 선택자는 클래스 선택자(Class selector) 입니다. . 기호에 클래스 이름을 붙여서 사용하며 클래스 선택자로 특정 clas..

IR 기법 ir기법을 사용하는 이유 의미있는 이미지의 대체 텍스트를 제공하는 경우 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 Phark Method - 이미지 대체 텍스트 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 .ir-pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } WA IR - 이미지 대체 텍스트 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그..

웹 사이트에서 이미지를 표현하는 방법 img 태그 사용법 img는 HTML 문서에 이미지를 삽입하는 태그입니다. 이미지의 의미가 있을 때 img 태그를 사용합니다. alt 태그를 이용해서 대체 문자를 적어야 합니다. 주요 속성 src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 Background 속성 이미지가 의미가 없을 때 background 속성을 사용합니다. 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다. 주요 속성 background : 백그라운드 속성을 일괄적으로 설정 background-image : 백그라운드 이미지 및 배경 속성을 설정 backgroun..