본문 바로가기

내마음대로만들어보자326

반응형 사이트 - 컨텐츠 영역 레이아웃 레이아웃 연습을 할때 해봐서 알겠지만, 반응형 사이트를 만들때 주의할 점으로는 왼쪽과 오른쪽 컨텐츠 영역은 고정을 시키고 가운데 영역이 줄어 들 수 있도록 코딩을 해줘야한다. (3개의 영역 모두 width 값을 % 로 정할 경우에는 반응형 사이트를 만들경우 3개의 영역이 같이 줄어드게 된다.) ※ 예제 소스 반응형 사이트 컨텐츠 반응형 사이트 왼쪽 컨텐츠 반응형 사이트 왼쪽 컨텐츠1 반응형 사이트 왼쪽 컨텐츠2 반응형 사이트 왼쪽 컨텐츠3 반응형 사이트 가운데 컨텐츠 반응형 사이트 가운데 컨텐츠1 반응형 사이트 가운데 컨텐츠2 반응형 사이트 가운데 컨텐츠3 반응형 사이트 오른쪽 컨텐츠 반응형 사이트 오른쪽 컨텐츠1 반응형 사이트 오른쪽 컨텐츠2 반응형 사이트 오른쪽 컨텐츠3 * 레이아웃 */ body {.. 2022. 4. 12.
가상요소 (::before , ::after) 1.가상 요소와 가상 클래스 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있다. 2. 가상요소 종류 가상 요소 설명 ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택. ::marker 목록 아이템 앞에 붙는 마커를 선택. ::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택. ::first-line 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택. 2. 적용 예.. 2022. 4. 11.
box-sizing 1. box-sizing box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다. 박스 요소의 width 값은 margin, padding, border 값을 포함하여 계산합니다. box-sizing: border-box로 설정할 경우 박스 요소의 width 값은 margin, border 값을 포함하여 계산합니다. padding 값은 제외... 2. box-sizing 문법 /* 기본 속성 */ box-sizing: content-box;(기본값) → border, padding 값이 포함되지 않는다. box-sizing: border-box; → border, padding 값이 포함해서 width값을 계산한다. /* 기본 값으로 설정합니다. */ box-sizing: initial; /.. 2022. 4. 10.
IR효과기법 /* IR효과(IR기법) */ /* 이미있는 이미지의 대체 텍스트를 제공 하는경우 */ .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미 있는 이미지의 대체 텍스트를 이미지가 없어도 대체 텍스트를 보여주고자 할때 */ .ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 대체텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때*/ .ir_su {overflow: hidden; position: absolute; width: 0; height:.. 2022. 4. 10.

티스토리툴바