웹개발17 [HTML / CSS] List / List Styling 1. "ol" - 순서가 있는 리스트 태그 (Ordered List) type 속성: "a" 소문자 알파벳순으로 진행되는 리스트 "A" 대문자 알파벳순으로 진행되는 리스트 "1" 숫자순으로 진행되는 리스트 (default 값임) 2. "ul" - 순서가 없는 리스트 태그 (Unordered List) list-style-type 속성 default 값 : 동그라미 "square" : 네모 하위 "li" 태그에 list-style 속성을 "none"으로 설정 시 리스트 서식 제거 3. "li" - 리스트요소 태그 (ol, ul의 하위 태그 - List Item) 대한민국 남아프리카공화국 오스트레일리아 소나무 전나무 벚나무 양궁 유도 수영 수학 과학 영어 미술 음악 체육 2020. 1. 8. [HTML / CSS] Float / Grid-layout / Clear 1. Float block요소를 부유(float) 시켜주는 속성 부유(float)되는 block요소 밑으로 뒤에 있는 block요소가 자리를 채운다. (inline / inline-block 속성의 요소는 float 된 요소 밖으로 밀려남) 기사에 삽입된 광고나 단락에 삽입된 이미지가 가장 흔한 예시. 3. Clear "float" 속성과 같이 쓰이는 속성 "clear"는 'float"의 좌우 빈공간에 컨텐츠가 따라 붙어 버리는 큰 문제를 해결해주는 역할을 함. 속성값 left / right를 취해 왼쪽 혹은 오른쪽에 더이상 요소가 붙지 않게끔 해줌. 2020. 1. 8. [HTML / CSS] CSS Positioning 1. relative position "position" 속성 기본값 : static - 원래 있어야 할 위치에 있는 것 relative 값 : 주변 요소들을 밀어내지 않고 (margin은 주변요소를 밀어냄) static값 상태를 기준으로 요소위치가 변경 가능. 개인적으로 마우스 오버시 글자가 문단에서 입체적으로 튀어나오게 하는 효과를 줄 때 사용하고 싶음. 1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 2. 남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 2. Fixed Position "relative"는 원래 위치 기준으로 위치 지정 -.. 2020. 1. 4. [HTML / CSS] Display 속성 1. display 종류 모든 요소는 딱 하나의 display 값을 갖음 (중복 불가) 대부분의 요소는 "inline" 혹은 "block" display 종류 inline block inline-block flex list-item none 2. inline display "inline" display를 기본값으로 갖는 요소들 "inline" display의 특징 앞뒤 텍스트와 같은 줄에 머무름 가로 길이는 필요한 만큼만 차지 width / height 설정이 되지 않는다. 내용에 맞게 자동 설정 3. block display "bolck" display를 기본값으로 갖는 요소들 ~ "block" display의 특징 앞뒤 요소와 다른 새로운 줄 생성 가로 길이를 최대한 많이 (기본 100%) 차지 wi.. 2019. 12. 31. 이전 1 2 3 4 5 다음
