본문 바로가기

웹프로그래밍13

HTML & CSS #10 : 시맨틱 태그(semantic tag) 표준화된 시맨틱 태그를 사용하여 웹 문서를 작성하면 어떤 기기에서도 문서 구조를 정확히 할 수 있다. iframe 태그를 이용해 외부 문서(사이트) 포함시키기 제주도 게스트하우스 웹 첫 페이지 만들어보기 (기본적 내용 출처 : Do it! HTML5 + CSS3 웹 표준의 정석) css파일 @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap') ; * { margin: 0;.. 2022. 12. 13.
HTML & CSS #09 : CSS Layout CSS 포지셔닝 웹 문서 요소를 적절히 배치하는 것 box-sizing 속성 박스 모델 너비 값의 기준을 지정한다. content-box, border-box float 속성 요소를 왼쪽이나 오른쪽으로 floating 하게 만드는 것. left, right, none clear 속성 float 속성을 무효화 시키는 속성 none, left, right, both both 많이 사용 position 속성 웹 문서 안에 요소들을 배치하기 위한 속성 static, relative, absolute, fixed static : 요소를 문서에 흐름에 맞춰 배치 relative : 이전 요소에 연결해 배치. 위치 지정 가능. (left나 top으로 요소 이동 가능) absolute : 원하는 위치에 배치. 부모 요.. 2022. 12. 13.
HTML & CSS #08 : CSS 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소. 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간은 다른 요소가 온다. 박스 모델 실제 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성된다. 웹에서 F12키로 확인 가능하다. width, height 속성 실제 콘텐츠 영역의 크기 px단위의 크기와 백분율로 지정 가능. auto 값도 속성값에 들어갈 수 있다. display 속성 블록 레벨 요소를 인라인 레벨 요소로, 인라인 레벨 요소를 블록 레벨 요소로 바꿔주는 속성 none, contents, block, inline, inline-block, table, table-cell등 특히 inline-block은 요소를 인라인 레벨로 배.. 2022. 12. 13.
HTML & CSS #07 : 색상과 배경 background-color 속성 웹 문서의 요소에 배경색을 지정할 때 16진수나 rgb값, rgba(투명도까지), 색상이름으로 지정 가능 **배경은 상속되지 않는다! background-clip 속성 배경을 어디까지 적용할 것인지 border-box : 테두리(border포함)까지 적용 padding-box : 테두리만 뺀(padding 포함) 영역까지 적용 content-box : 내용 부분만 적용 background-image 속성 배경 이미지 파일 경로를 지정하여 사용 background-image: url(파일경로); background-repeat 속성 배경 이미지 반복 여부와 방향 repeat, no-repeat, repeat-x, repeat-y background-size 속성 배경 이.. 2022. 12. 13.