본문 바로가기

HTML5 & CSS322

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.
HTML & CSS #06 : 텍스트 스타일 font-family 속성 : 웹 문서에서 사용할 글꼴 지정 구글 웹 폰트 사용하는 방법!! https://hhahee.tistory.com/4 HTML & CSS : 구글 웹 폰트 사용하기 CSS에서 구글 웹 폰트를 지정하여 사용하는 방법이다. 구글 폰트의 주소는 포스트 하단에 추가하였다. 구글 폰트 사이트로 들어간다. 여기서 원하는 글꼴(폰트)를 고른 후, 선택한다. 나는 Nanum Bru hhahee.tistory.com 되도록 구글 웹폰트를 사용하여 글꼴 설정하는 것이 좋다. font-size 속성 글자 크기 조절하는 속성 절대크기, 상대크기, 숫자, 백분율로 값 지정 가능 기본 값은 상대크기의 medium 값이다. px와 em 단위를 많이 사용한다. px 단위를 사용하면 폰트 크기가 고정된다. .. 2022. 12. 13.
HTML & CSS #05 : CSS 기본 HTML - 구조 CSS - 꾸미는 것 으로 간단하게 생각하면 된다. 스타일 시트(style sheet) 스타일은 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 배치방법 등 겉모습을 구성하는 내용들 스타일 시트 : .css의 확장자를 갖으며, 관리하기 쉽도록 한 파일에 모아놓은 것 스타일 형식 선택자 { 스타일속성: 속성값; } 선택자는 스타일 규칙이 적용될 대상이다. 속성값이 여러가지라면 세미콜론(;)으로 구분한다. 주석 /* */ 사이 주석 입력 여러 줄 입력 가능 .html 파일에 스타일을 입력하고자 한다면, 태그 안에 스타일 태그를 입력하여 그 안에 작성하면 된다. .css 확장자로 파일을 따로 생성하여 스타일을 입력하고자 한다면, 태그 안에 를 입력하여 css파일을 하이퍼링크로 넣으면 .. 2022. 12. 13.
HTML & CSS : 산술연산 계산기 만들기 산술연산 ( 더하기, 빼기, 곱하기, 나누기 )이 가능한 계산기 웹프로그래밍 계산하기(+, -, *, /) + = - = * = / = num1.value 값(string)을 숫자로 받기 위하여 parseInt()를 사용 피연산자는 태그로, 연산 후 결과값은 태그로 구성 태그의 oninput 속성값에 들어있는 연산을 수행. 최종적으로 이렇게 정리할 수 있겠다. +(하고싶은연산자(그냥 텍스특값)) =(하고싶은연산자(그냥 텍스특값)) 출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희) 사진 출처 : Pixabay 2022. 12. 13.
HTML & CSS : 버튼 만들어보기 실습 버튼을 호버했을 때 (마우스를 위로 올렸을 때) 스타일이 변경되도록 하는 코드 전송하기 출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희) 사진 출처 : Pixabay 2022. 12. 13.
HTML & CSS #04 : 폼, input태그 폼(form) : 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소 이런 작업은 데이터베이스를 기반으로 한다. 태그 과 사이에 여러가지 폼 요소를 삽입하여 사용 method 속성 : 사용자가 입력한 내용을 서버로 어떻게 넘겨줄지 지정하는 속성으로 get과 post 가 속성값으로 있다. name 속성 : 폼의 이름을 지정하는 속성. action 속성 : 폼 태그 안의 내용들을 처리해줄 서버 상의 프로그램을 지정 target 속성 : 지정한 스크립트 파일을 다른 위치에 열도록 지정 태그 폼 요소에 레이블(텍스트)를 붙이는 태그이다. 라디오 버튼이나 체크 박스에서 레이블 부분을 클릭해도 해당 버튼이 선택된다. 태그 폼 요소를 그룹으로 묶는 태그 table태그의 tr태그처럼 묶어주는 태그이다. 태그 그룹으로.. 2022. 12. 13.

티스토리툴바