본문 바로가기

CSS19

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 : 산술연산 계산기 만들기 산술연산 ( 더하기, 빼기, 곱하기, 나누기 )이 가능한 계산기 웹프로그래밍 계산하기(+, -, *, /) + = - = * = / = num1.value 값(string)을 숫자로 받기 위하여 parseInt()를 사용 피연산자는 태그로, 연산 후 결과값은 태그로 구성 태그의 oninput 속성값에 들어있는 연산을 수행. 최종적으로 이렇게 정리할 수 있겠다. +(하고싶은연산자(그냥 텍스특값)) =(하고싶은연산자(그냥 텍스특값)) 출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희) 사진 출처 : Pixabay 2022. 12. 13.
HTML & CSS #04 : 폼, input태그 폼(form) : 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소 이런 작업은 데이터베이스를 기반으로 한다. 태그 과 사이에 여러가지 폼 요소를 삽입하여 사용 method 속성 : 사용자가 입력한 내용을 서버로 어떻게 넘겨줄지 지정하는 속성으로 get과 post 가 속성값으로 있다. name 속성 : 폼의 이름을 지정하는 속성. action 속성 : 폼 태그 안의 내용들을 처리해줄 서버 상의 프로그램을 지정 target 속성 : 지정한 스크립트 파일을 다른 위치에 열도록 지정 태그 폼 요소에 레이블(텍스트)를 붙이는 태그이다. 라디오 버튼이나 체크 박스에서 레이블 부분을 클릭해도 해당 버튼이 선택된다. 태그 폼 요소를 그룹으로 묶는 태그 table태그의 tr태그처럼 묶어주는 태그이다. 태그 그룹으로.. 2022. 12. 13.
HTML & CSS #03 : 이미지 & 하이퍼링크 이미지는 gif, jpg, jpeg, png 의 파일 형식이 지원 태그 - 이미지 태그 웹 문서에 이미지를 삽입할 때 사용 src 속성으로 상대경로(html 파일이 있는 곳 기준)로 이미지 파일 경로를 지정해 사용 닫힘 태그가 없다. alt 속성을 꼭 사용해주어야한다. alt 속성은 이미지를 설명하는 대체 텍스트 width, height 속성으로 이미지 크기 조정하기 (각각 가로폭, 높이폭) 이미지를 삽입할 때는 대략적인 해상도에 맞춰 업로드하는 것이 좋다. 깨지는 것을 방지하며, 용량이 큰 사진을 업로드해 비효율적이게 됨을 막기 위함. 포토샵을 사용해 해상도 조정하기! (image-image size) 태그 : 설명글을 붙일 대상을 지정 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용 설명글 표시.. 2022. 12. 13.
HTML & CSS #02 : text 태그 - 제목표시 기본형 : 제목 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용 크기 : h1 > ~ > h6 태그 - 본문 텍스트 단락 기본형 : 텍스트 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 생성됨 태그 - 줄바꾸기 기본형 : 줄을 바꿀 위치에 태그를 사용. 닫는 태그가 없음 태그 - 분위기 전환 기본형 : 수평 줄이 생성됨 주제가 바뀔 때 분위기를 전환하기 위해 사용 , 태그 - 영역 묶기 텍스트 : 줄 안에서 (인라인) 묶기 -> 외부에서 보여지지는 않지만 구분을 할 수 있도록 블록을 지정해주는 것 텍스트 : 줄을 바꿔 (블록) 단락으로 묶기 태그 - 인용문 넣기 기본형 : 인용문 인용문을 들여쓰기 태그 - 인용 내용 표시 기본형 : 인용 문구 줄바꿈 없이 다른 내용과 한 줄에 인용문.. 2022. 12. 13.
HTML & CSS #01 : 기본 HTML - 텍스트와 이미지, 링크 등 여러 요소를 다루고 표시할 수 있는 웹 문서를 만드는 언어 시작태그와 끝태그로 작성 ~ : 제목태그 : 이미지 태그 : 본문 태그 상단 와 : 현재 문서가 HTML5 언어로 작성된 웹 문서 ~ : 웹 문서의 시작과 끝 lang이라는 속성을 사용해 문서에서 사용할 언어 지정 (lang="ko") : 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분. (메타 데이터를 넣는 곳) 스타일 및 스크립트 등이 포함 문서에서 사용할 외부 파일들 링크. 태그와 태그 등이 있음 ~ : 실제로 웹 브라우저 화면에 나타날 내용 출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희) 2022. 12. 13.