본문 바로가기
반응형

IT/Web106

CSS 선택자 (2) 구조 의사 클래스(structural pseudo-class) 구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있습니다. CSS에서 사용할 수 있는 구조 의사 클래스는 다음과 같습니다. 의사 클래스 설명 :first-child 모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식(child) 요소를 모두 선택함. :last-child 모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택함. :nth-child 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함. :nth-last-child 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(chi.. IT/Web 2020. 3. 19.
CSS 선택자 (1) 선택자(selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다. 지금까지 살펴본 대표적인 선택자는 다음과 같습니다. 전체 선택자 HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택자 그룹(group) 선택자 전체 선택자 CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. ... 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 - # 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다. .. IT/Web 2020. 2. 24.
CSS 위치 속성 - Float(플로트), align(정렬) float 속성 float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. 다음 예제는 이미지와 글자를 함께 출력하는 예제입니다. float 속성을 이용한 위치 설정 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget sceler.. IT/Web 2020. 2. 20.
CSS 위치 속성 - display, position 디스플레이 display 속성 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다. 블록(block) 인라인(inline) 블록(block) display 속성 값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 대표적인 블록(block) 요소입니다. , , , , , 요소는 대표적인 블록(block) 요소입니다. 인라인(inline) display 속성 값이 인라인(inline)인 요.. IT/Web 2020. 2. 14.
CSS 박스 모델 - 박스 모델, 패딩, 테두리, 마진, 아웃라인 박스 모델 박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. CSS 박스 모델 CSS 박스 모델입니다. Lorem ipsum dolor sit .. IT/Web 2020. 2. 13.
반응형

티스토리툴바