햄스타69

목차 주요 속성 1) CSS 포지셔닝이란? ① CSS를 이용해 웹 문서 요소를 적절히 배치하는 것 2) 박스 너비 기준 정하기 box-sizing 속성 ① 웹 문서에 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야되는데 width 속성은 박스 모델 전체의 너비가 아니고 콘텐츠 부분의 너비임. 따라서 패딩이나 테두리 크기는 따로 계산해야됨 ② box-sizing 속성을 사용하면 width 속성을 콘텐츠 영역의 너비 값으로 할지 요소의 너비 값으로 할지 지정 가능 ③ 기본형 box-sizing : content-box | border-box ④ 속성 값 content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용. 기본값 border-box : width 속성 값을 박스 모델 전체..

목차 1) margin 속성 요소 주변 여백 설정하기 ① 현재 요소 주변의 여백. 한 요소와 다른 요소 사이의 간격 조절 ② 기본형 margin-top : | | auto margin-right : | | auto margin-bottom : | | auto margin-left : | | auto margin : | | auto ③ 속성값 : 너비나 높이 값을 px나 cm와 같은 단위와 함께 수치로 지정 : 박스 모델을 포함하고 있는 부모 요소의 너비나 높이 값을 기준으로 %로 지정 auto : Display 속성에서 지정한 값에 맞게 적절한 값을 자동 지정 ④ margin 속성 값 개수에 따른 차이 - 1개 : 네 방향 모두 동일한 값 적용 - 2개 : 첫번째 값은 위아래, 두번째 값은 좌우 - 3개..

목차 1) 테두리 스타일 지정하기 border-style 속성 ① 기본 값이 none이기 때문에 화면에 테두리가 표시되지 않음 ② 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정 ③ 기본형 border-style : none | hidden | dashed | dotted | double | groove | insert | outset | ridge | solid ④ border-style에 지정 가능한 속성 값들 속성 값 설명 속성 값 설명 none 테두리가 나타나지 않음. 기본 값(아예 선이 없음) groove 테두리를 창에 조각한 것처럼 표시. hidden 테두리가 나타나지 않음. (선이 있으나 숨김) insert border-collapse:separate일 경우 전체 박스 테두리가 창에..

목차 1) 블록 레벨 요소와 인라인 레벨 요소 ① 블록 레벨 요소 - 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소로 요소의 너비가 100%라는 의미 - 해당 요소 좌우에는 다른 요소들이 올 수 없음 - 너비나 마진, 패딩 등을 이용해 크기나 위치 지정 ② 인라인 레벨 요소 - 줄을 차지하지 않는 요소 - 화면에 표시되는 콘텐츠만큼 영역을 차지하고 나머지 공간에 다른 요소 올 수 있음 - 한 줄에 여러 개의 인라인 레벨 요소 표시 가능 ③ 블록 레벨 요소와 인라인 레벨 요소를 만드는 태그의 종류 종류 해당 태그 블록 레벨 태그 , ~, , , , , , , , , 인라인 레벨 태그 , , , , , , , , , 2) 박스 모델(box model) ① 블록 레벨 요소들은 모두 박스 형태 ② 박스 형태의..

목차 1) 그라데이션과 브라우저 접두사 ① 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용 ② 그라데이션 속성은 표준화 됨 ③ 하지만 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함 2) 선형 그라데이션 ① 수직 방향이나 수평 방향 또는 대각선 방향으로 색상이 일정하게 변하는 것 ② 선형 그라데이션 지정 시 방향과 색상 필요 ③ 기본형 liner-gradient ( to , color-stop, [color-stop,...]); ※ 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전별 사용법이 조금씩 다름 ④ 방향 : 끝 지점을 기준으로 ‘to’키워드와 함께 사용 to top 아..

목차 웹에서 색상 표현하기 1) 16진수 표기법 ① #ffffff 처럼 #과 함께 6자리의 16진수로 표시. ② 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양. ③ 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시. ④ 000000(검은색) ~ ffffff(흰색) ⑤ 두 자리씩 중복될 경우 줄여 사용할 수 있음. ex) #ffff00  #ff0, #cccccc  #ccc 2) rgb와 rgba 표기법 ① color:rgb(255,0,0)처럼 세 자리의 숫자로 표시. ② 앞의 숫자부터 빨강, 초록, 파랑의 양. ③ 하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255 ④ 투명도를 조절할 때는 color:rgba(255,0,0,.3) 처럼 마지막에 알파값 추가 ⑤ 알파값은 불투명도를..

목차 글꼴 1) 글꼴 지정하기 font-family 속성 ① 기본형 font-family : [,, ] ② body{ font - family : "맑은 고딕", 돋움, 굴림} 웹 문서 전체에 "맑은 고딕"이라는 글꼴을 적용하는데 만약 "맑은 고딕" 글꼴이 없다면 "돋움" 글꼴로 적용하고 그 글꼴도 없다면 "굴림: 글꼴로 적용하라는 뜻 ③ 웹 문서에서 사용할 글꼴 지정 ④ 를 비롯해 나 처럼 텍스트를 사용하는 태그에서 사용 ⑤ 웹 문서에서 글꼴을 지정할 시 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정함. 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 ⑥ font-family 속성은 상속되기 때문에 스타일에서 정의하면 문서 전체에 적용되..

목차 1) CCS3란? ① CSS가 스타일 시트의 기본이 되면서 CSS1과 CSS2를 거쳐 스타일 시트가 많이 알려졌고 널리사용되고 있음 ② HTML5가 개발되면서 CSS3 기술도 함께 개발되고 있는 데 CSS2나 CCS1보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원 가능 ③ CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있어서 덩치가 크고 복잡해 한 번에 업데이트하기 쉽지 않다는 단점이 존재 ④ CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 생성함. 이것을 CSS 모듈이라고 함. ⑤ CSS 유효성 검사(https://jigsaw.w3.org/css-validator/) ⑥ CSS 관련 뉴스 및 CSS 규약 확인(https://www.w3..

목차 주요 선택자 1) 전체 선택자 모든 요소에 스타일 적용하기 ① 정의한 스타일을 모든 요소에 적용할 때 사용 ② 전체 선택자로는 *(별표)로 사용 ③ 기본형 *{ 속성 : 속성값; 속성: 속성값; ...} ④ 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용 2) 태그 선택자 특정 태그를 사용한 요소에 스타일 적용하기 ① 특정 태그에 스타일을 적용하는 데 사용 ② 전체 선택자 다음으로 많은 요소들에 스타일 적용 가능 ③ 기본형 태그{스타일} ※ 태그와 요소의 차이점 ① 텍스트 단락을 지정하는 p 태그 ② 위 소스에서 , 가 태그이고 ‘텍스트 단락을 지정하는 p 태그‘ 부분이 p 요소 ③ 따라서 스타일은 태그에 적용되는 것이 아니고 태그 안에 요소에 적용되는 것 3) 클래스 ..

목차 CSS란 ① CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념 ② HTML이 웹 문서에 뼈대를 담당, CSS는 웹 문서의 디자인 요소를 담당 ③ : 스타일 시트를 정의하는 태그 ④ * { 속성 } : 문서 전체에 스타일을 적용하는 전체 선택자 ⑤ .스타일 이름 { 속성 } : class 속성으로 묶은 특정 부분에만 스타일을 적용하는 class 선택자 ⑥ #스타일 이름 { 속성 } : id 속성으로 묶은 부분에만 스타일을 적용하는 id 선택자 ⑦ 이름1, 이름2, … { 속성 } : 여러 항목에 같은 스타일을 적용하는 그룹 선택자 스타일과 스타일 시트 1) 스타일과 스타일 시트 ① 스타일(style) : HTML 문서에서 글꼴이나 색상, 정렬, 각 요소들의 배치..