728x90 방통대/HTML532 [HTML5] 8-3 변형 -변형 : 요소의 형태, 크기, 위치를 변경시키는 효과 -> 이동, 회전, 크기 변경, 기울임 -변형 관련 속성 -transform 속성 : 요소에 대한 변형 지정 *값 -> none, + -변형 함수의 종류 *이동 *크기 확대/축소 *회전 *기울임 *이동, 크기 확대/축소, 회전, 기울임을 한꺼번에 지정하는 함수 -translate 관련 변형 함수 : 요소의 중앙점을 기준으로 좌표축을 따라 지정한 거리만큼 이동 *음수 가능 -> 좌표축의 반대 방향으로 이동 -scale 관련 변형 함수 : 요소의 중앙점을 기준으로 확대(인자>1) 또는 축소(인자0 : 시계 방향, 각도 자식 요소에 원근감 부여 *값 -> none, -perspective-origin 속성 : 원근을 조절할 때 X축과 Y축에 대한 기준점 .. 2024. 4. 14. [HTML5] 8-2 그라데이션 그라데이션 : 두 개 이상의 색상 사이에서 색상의 점진적인 변화 -선형 그라데이션 : linear-gradient(진행방향, 색상1, 색상2, ...) -> 진행방향 to 키워드(top, bottom, ...) 또는 각도(deg) 출력: -선형 그라데이션의 반복 : repeating-linear-gradient() -방사형 그라데이션 -방사형 그라데이션의 반복 repeating-radial-gradient(red, yellow 15%, green 25%) -원뿔형 그라데이션 -원뿔형 그라데이션의 반복 : repeating-conic-gradient(red, yellow 30deg, green 60deg) 2024. 4. 13. [HTML5] 8-1 배경 배경 관련 속성 -background-color 속성 : 요소의 배경색 지정 *값 -> transparent, 출력: -background-image 속성 : 요소의 배경으로 사용할 이미지 파일 지정 *값 -> none, url(파일) *콤마로 구분해서 여러 개의 이미지 지정이 가능 -> 계층 형성 출력: -background-repeat 속성 : 배경 이미지의 반복 여부 지정 *값 -> repeat, repeat-x, repeat-y, no-repeat, space, round -space : 배경을 채우는 영역의 경계에서 이미지가 잘려 보이지 않도록 반복 이미지 간의 공백 조정 -round : 배경을 채우는 영역의 경계에서 이미지가 잘려 보이지 않도록 이미지의 크기를 재설정 출력: -backgroun.. 2024. 4. 13. 7-2 테두리 border 관련 속성 속성 설명 border-width 테두리의 굵기 지정 *값 -> medium, thin, thick, border-style 테두리의 스타일 지정 *값 -> none, hidden, dotted, dashed, solid, double, froove, ridge, inset, outset border-color 테두리의 색상 지정 *값 -> (검정), transparent border border-* 속성을 한꺼번에 지정 * border-style 속성값은 필수 *속성값의 개수에 따른 적용 방향 4 -> 상 우 하 좌 3 -> 상 좌우 하 2 -> 상하 좌우 1 -> 상하좌우 ex) ex2) ex3) ex4) -border-radius 속성 : 요소 박스의 각 모서리를 둥글게 지정.. 2024. 4. 6. 7-1 박스 모델 CSS 박스 모델 -속성 -출력 : 모든 HTML 요소를 사각형 형태의 박스로 취급 -> CSS를 통해 각 박스의 위치, 크기, 색상 등을 지정 *웹 페이지의 레이아웃을 구성하는 중요한 개념 -margin 속성 : 박스의 외부 여백(테두리 밖의 여백) 지정 -> 모든 방향(상우하좌)에 대해서 일괄 지정 *속성값의 개수에 따른 마진의 적용 방향 4 -> 상 우 하 좌 3 -> 상 좌우 하 2 -> 상하 좌우 1 -> 상하좌우 -> 개별 방향의 마진 지정 출력: : 인접한 두 요소의 수직 여백(bottom - top)은 통합됨 -padding 속성 : 요소의 내용과 테두리 사이의 여백 지정 -> 모든 방향(상우하좌)에 대해서 일괄 지정 *속성값의 개수에 따른 마진의 적용 방향 4 -> 상 우 하 좌 3 ->.. 2024. 4. 6. 6-3 리스트 리스트 관련 속성 출력: border속성 : table, td, th 요소에 대한 테두리 지정 table-layout속성 : 셀 안의 내용의 크기에 따른 셀의 크기 변화 여부 지정 *auto : 셀의 폭이 셀의 내용의 크기 따라 자동으로 결정 *fixed : 셀의 내용의 크기와 상관없이 테이블/셀의 폭에 의해서만 결정 border-collapse 속성 : 테이블 테두리와 셀 테두리를 하나로 합칠지 여부 지정 *separate : 두 테두리를 분리해서 표시 *collapse : 두 테두리를 하나로 합쳐서 표시 // border-spacing 속성과 empty-cells 속성은 무시됨 border-spacing 속성 : 인접한 셀 테두리 사이의 간격 지정 *값 -> (기본값: 0.0) // 하나의 값만 지정.. 2024. 3. 31. 6-2 텍스트 텍스트 관련 속성 letter-spacing, word-sapcing 속성 -letter-spacing : 문자 사이의 간격 -word-spacing : 단어 사이의 간격 *값 -> normal, (음수 가능-> 서로 겹칠 수 있음) letter-spacing 출력: word-spacing 출력: line-height 속성 : 문장의 줄 간격 지정 *값 -> normal, , , % 출력: text-align 속성 : 텍스트의 수평 정렬 방식 지정 *값 -> left, right, center, justify(양쪽 정렬) 출력: text-align-last 속성 : 텍스트의 마지막 줄의 정렬 방식 지정 text-indent 속성 : 텍스트 블록에서 첫 번째 줄의 들여쓰기 지정 text-transform .. 2024. 3. 31. 6-1 글꼴 글꼴 관련 속성 font-family 속성 : 값 -> , -폰트패밀리 출력: ex) -일반폰트명 ex) font-size 속성 : 글자 크기 지정 출력: ex) font-style 속성 : 글자 모양 지정 *값 -> normal, italic(기울어진 형태), oblique(기울어진 형태) 출력: font-variant 속성 : 작은 크기의 대문자로의 변환 여부 *값 -> normal, small-caps(작은 대문자로 변환) 출력: font-wight 속성 : 글자의 굵기 지정 출력: font 속성 : 글꼴 관련 속성(font-*)을 한꺼번에 지정하는 속성 // size, family값은 필수. 다른 값들은 생략 가능. // size가 먼저 family는 나중 순서이다. // line-height값은.. 2024. 3. 30. 5-3 색상 1. 색상 표현 방법 -색상명 사용 : 색상에 해당하는 영어 단어를 직접 사용 *RGB 색 모델 -> 3원색의 성분이 더해져서 색을 만드는 모델 : 16진수 사용 : RGB 함수 사용 -> rgb(R, G, B) : R, G, B의 각 값을 0~255 사이의 10진수로 표시 -> rgb(R%, G%, B%) : R, G, B 각 값을 백분율(0~100%)로 표시 -> rgb(R, G, B, Alpha) * rgb(R, G, B) + 투명도 (0.0 완전 투명 ~ 1.0 완전 불투명) * rgb(R, G, B) = rgba(R, G, B, 1.0) * HSL 색 모델 -색조 : 반사광의 색 성분을 경정하는 강한 에너지 -채도(S) : 색이 순수한 스펙트럼 색에 얼마나 가까운 가를 나타내는 성분 -> 색상의.. 2024. 3. 23. 이전 1 2 3 4 다음 728x90
