본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _

html+css23

의사 클래스(pseudo-class) 의사 클래스(pseudo-class) CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다. 선택자:의사클래스이름 {속성: 속성값;} 선택자.클래스이름:의사클래스이름 {속성: 속성값;} 선택자#아이디이름:의사클래스이름 {속성: 속성값;} 동적 의사 클래스(dynamic pseudo-classes) :link 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태) ex) a:link {color: orange;} :visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함. ex) a:visited {color: gray;} :hove.. 2021. 4. 25.
align 정렬 (margin, position, float) margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 됩니다. 이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어집니다. 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 합니다. ex) div { width: 300px; margin: auto; padding:10px } position 속성을 이용한 좌우 정렬 절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됩니다. position 속성을 이용하여 정렬할 경우에는 요소에 margin과 padding .. 2021. 4. 25.
float 속성(clear, overflow) float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. ex) img { float: left; margin-right: 20px; } ex) html css div.page { border: 3px solid #CD5C5C; overflow: auto; } /가장 바깥을 overflow로 막음 h2 { text-align: center; } header{ border: 3px solid #FFD700; } nav { border: 3px ​​​​​​​solid #FF1493; width: 150px; float: left; } .. 2021. 4. 25.
position 속성(static, relative, fixed, absolute, z-index, clip ,cursor, overflow) position HTML 요소의 위치를 결정하는 방식을 설정함. 1. 정적 위치(static position) 지정 방식: position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다. 정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다. ex) div { position: static; } 2. 상대 위치(relative position) 지정 방식: 상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식입니다. HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지.. 2021. 4. 25.
display 속성 (block, inline, visibility, display, opacity ) block 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 대표적인 블록(block) 요소입니다. inline 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다. , , 요소는 대표적인 인라인(inline) 요소입니다. display display 속성의기본 설정값의 변경 display 속성값을 변경해도, 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아닙니다. 즉, display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없습니다. .. 2021. 4. 25.
box model 속성 (content, padding, border, margin, outline) content 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ex) div { background-color: red; padding: 50px; border: 20px solid maroon; margin: 50px; } padding 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left ex) div.four { padding: 10px 20px 30px 40px;} = padding-top: 10px; padding-right: .. 2021. 4. 25.

티스토리툴바