전체 글111 [HTML / CSS] CSS 세로정렬 (Vertical-Align ) 1. Vertical-Align inline 요소 혹은 inline-box요소의 경우 base line(밑줄) 에 따라 요소이 세로 정렬 상태 결정됨. verticla-align 속성은 기본적으로는 base-line 값으로 설정되어 있음. (부모 요소 기준 base-line) base-line은 각 요소의 vertical-align 속성 값을 충족하면서 줄의 높이가 최소가 될 수 있는 지점으로 이동함. vertical-align 속성은 inline 요소 혹은 inline-box 요소에만 적용 가능 (box 요소는 display를 inline 이나 inline-box로 변경해서 적용해줘야함.) 2. vertical-align 속성 외 세로 정렬 방법 플렉스 박스 속성을 사용한 정렬 방법 - 상세는 링크 참.. 2020. 1. 1. [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. [HTML / CSS] CSS 상속 / 우선순위 1. CSS 상속 부모 요소의 속성 -> 자식 요소에도 자동 적용되는 것 "margin" 등 상속 시 문제가 될 만 한 속성은 상속되지 않는다. 어지간한 폰트 / 컬러 / 정렬 관련 속성은 상속된다. color font-family font-size font-weight font-height line-height list-style text-align visibility 등등 태그에는 폰트 / 컬러/ 정렬 관련 속성도 기본적으로는 상속되지 않는다. 태그에 상속 시키기 위해서는 해당 속성에 "inherit" 값 설정 홈 화면로 이동합니다! 2. CSS 적용 우선순위 A. 순서 : 동일한 선택자가 뒤에 나오면 이전 스타일 내용을 덮어 씀. CSS ORDER B. 명시도 : 동일한 요소를 지정하지만 선택자가 .. 2019. 12. 30. [HTML / CSS] 구글 폰트 사용 / 폰트 파일 사용 1. 폰트 파일 사용하는 방법 폰트 파일을 다운받아 웹 페이지에 적용시키는 방법 /* 본인이 가지고 있는 폰트 파일을 사용하는 방법 */ /* 폰트 css파일로 불러오기 */ @font-face{ src: url("폰트 저장 경로/파일명"); font-family: "임의 지정 폰트명" } /* 불러온 폰트 요소에 적용시키기 */ div { font-family: "임의 지정 폰트명" } 2. 구글 폰트 사용하는 방법 구글에서 제공하는 폰트를 끌고와서 사용하는 방법 font.google.com으로 접속 / 한글폰트 "link"태그로 폰트 연결 후 불러오기 2019. 12. 28. [HTML / CSS] CSS 선택자 1. Tag (태그 이름) /* 모든 태그 */ h1 { font-size: 80px; } CSS 적용 대상 O CSS 적용 대상 X 2. Class (클래스) / Id (아이디) /* class 'red' 를 갖는 모든 태그 (class는 '.'를 앞에 붙여표시) */ .red { color: red; } /* id 'blue' 를 갖는 태그 (id는 '#'를 앞에 붙여표시) */ #blue { color: blue; } CSS 적용 대상 O CSS 적용 대상 X CSS 적용 대상 X CSS 적용 대상 O CSS 적용 대상 X CSS 적용 대상 X 3. Children (자식) /* class 'parents'를 갖고 있는 자식 요소 중 모든 태그 */ .parents h1 { color: orange.. 2019. 12. 28. [HTML / CSS] 배경이미지 삽입 1. Background-Repeat (배경이미지 반복) background-repeat 속성 값 설정으로 배경이미지 반복 여부 및 방법 결정 /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repe.. 2019. 12. 26. [HTML / CSS] Box Decorations 1. Border-Radius (둥근 모서리) boder-radius 속성 값으로 설정 radius 속성 값 크기에 비례해서 둥그러짐 radius 속성 값 상하좌우 각각 다르게 설정 가능함 2. Background-Color (배경색) background-color 속성 값으로 설정 배경색을 지정해 줌 배경색을 투명하게 둠(기본값) 3. Box-Shadow (그림자) box-shadow 속성 값으로 설정 (기본값은 none) 그림자 가로 세로 위치만 설정해주면 그림자 생성 그림자 색 설정 (기본값: black) 그림자 흐림(blur): 가로 세로 위치 뒤에 값 추가 그림자 흐림 크기(spread): blur 값 뒤에 값 추가 4. Box-sizing padding과 border 값을 설정하더라도 widt.. 2019. 12. 26. [HTML / CSS] BOX MODEL 1. Box Model 구성 Content : 실제 내용 Padding : 내용과 테두리 사이의 여유공간 Border : 테두리 Margin : 현재 요소와 다른 요소 사이의 여백 2. Margin padding의 상하좌우 각각 다른 넓이를 설정합니다. padding의 상하좌우 각각 다른 넓이를 한 번에 설정합니다. padding의 상하좌우 같은 넓이를 설정합니다. padding의 상하와 좌우만 다른 넓이를 설정합니다. 3. Padding margin 상하좌우 각각 다른 넓이를 설정합니다. margin 상하좌우 각각 다른 넓이를 한 번에 설정합니다. margin 상하좌우 같은 넓이를 설정합니다. margin 상하와 좌우만 다른 넓이를 설정합니다. 가운데 정렬 합니다. 4. Content - width, .. 2019. 12. 24. 이전 1 ··· 7 8 9 10 11 12 13 14 다음
