프로그래밍/HTML&CSS
-
패딩(padding)프로그래밍/HTML&CSS 2022. 9. 5. 20:18
패딩이란 콘텐츠와 테두리 사이의 여백을 설정하는 속성이다. 상하좌우 4 방향의 패딩을 한꺼번에 지정할 수 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어로 top, right, bottom, left를 사용해서 특정 방향에만 지정하여 패딩을 적용할 수 있다. padding-top:상 padding-right:우 padding-bottom:하 padding-left:좌 padding:상 우 하 좌 모든 방향 설정 패딩 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eum, quasi, delectus mollitia ab totam enim eaque quaerat quos odio id consectetur te..
-
border-radius프로그래밍/HTML&CSS 2022. 9. 3. 09:00
border-radius는 박스 모델의 테두리를 둥글게 만드는 방법으로 이 속성을 이용하면 원의 반지름을 이용한 둥근 정도를 표현한다. border-radius: | border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y border-radius 속성을 사용하면 이미지를 원 형태로 만들 수 도 있다. 이미지 요소의 너비와 높이를 똑같이 하고 border-radius의 반지름 값을 너비나 높이의 50%로 지정하면 원이 된다. 예를 들어 300px의 박스가 있다고하면 150px이나 50%로 적용하면 원으로 표현된다.
-
테두리(border)프로그래밍/HTML&CSS 2022. 9. 2. 22:18
테두리는 박스 모델의 끝 선상을 가리키며 스타일로 선의 종류, 두께 등을 지정할 수 있다. border-style border-style 속성은 테두리의 스타일을 지정할 때 사용하며, 기본 값은 none으로 속성 값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시 되지 않는다. 테두리의 스타일에는 여러 속성값이 있다. 종류 설명 none 태두리가 없음(기본값) hidden 테두리를 감춤 solid 테두리를 실선으로 표시 dotted 테두리를 점선으로 표시 dashed 테두리를 짧은 직선으로 표시 double 테두리를 이중선으로 표시 실선 점선 짧은 직선 이중선 border-width border-width 속성은 테두리의 두께를 지정한다. 속성값을 지정하지 않는다면 테두리가 나타나..
-
블록(block) 요소와 인라인(inline) 요소프로그래밍/HTML&CSS 2022. 9. 1. 22:01
블록 요소 블록 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄 전체를 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻으로 따라서 블록 요소 좌 우로는 다른 요소가 올 수 없다. 블록 태그의 특징을 갖고 있는 태그로는 , , 등이 있다. 시간이란.. 내일 죽을 것처럼 오늘을 살고 열원히 살 것 처럼 내일을 꿈꾸어라. 인라인 요소 인라인 요소는 블록요소 달리 한줄 전체를 차지 않는다. 컨텐츠 만큼만 영역을 차지하지 않고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 여러개의 인라인 요소가 올 수 있다. 인라인 요소의 특징을 갖는 태그로는 , , 이 있다. 시간이란.. 내일 죽을 것처럼 오늘을 살고 열원히 살 것 처럼 내일을 꿈꾸어라.
-
박스 모델(box model), 컨텐츠(content) 영역프로그래밍/HTML&CSS 2022. 9. 1. 21:52
CSS 박스 모델은 웹 문서의 내용을 박스 형태로 정의하는 방법을 의미하며 이러한 박스 모델들이 모여 웹 문서를 이루고 박스 모델에는 마진, 패딩, 테두리 등 박스가 여러겹 포함된 형태를 띈다. 박스 모델은 웹 문서의 블록 요소의 특징을 갖는 모든 박스를 박스 모델로 취급하는데, 박스 모델에는 컨텐츠 영역과, 박스 테두리와 컨텐프 영역 사이의 영역인 패딩의 영역과 박스의 테두리, 박스간의 사이 공간인 마진의 영역을 구성되어있다. 이때 마진과 패딩은 웹 문서에서 다른 컨텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념이다. 컨텐츠 영역 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분으로 박스 모델에서 컨텐트 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다. 종류 ..
-
배경 관련 스타일프로그래밍/HTML&CSS 2022. 8. 31. 19:28
background-color background-color 속성은 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 사용한다. 배경색 또한 color 속성과 마찬가지로 rgba, 16진수, 색상명 표기법 중 한 가지로 표현 가능하다. background-color: background-color : color: #ffff00 | rgb(0,0,255) | blue 배경색 적용하기 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, a iure vel nostrum est quos? Alias nulla voluptatum laboriosam cumque aspernatur at eos cupiditate consequ..
-
텍스트 관련 스타일프로그래밍/HTML&CSS 2022. 8. 30. 23:10
텍스트 관련 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일이다. color 웹문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 사용한다. color: color: #ffff00 | rgb(0,0,255) | blue 16진수 표현법과 rgb 표현법, 색생명 표현법으로 표현이 가능하다. 16진수 표현법 : 웹 문서의 CSS에서 색상을 16진수로 표현하는 방법으로 위 코드와 같이 #기호 다음으로 6자리의 16진수로 표시한다. 포토샵 같은 그래픽 프로그램에서 색상을 지정할때 사용하는 가장 기본적인 방법이다. 16진수는 #000000(검은색)부터 #ffffff(흰색)까지 표현 가능하고 만약 색상 값이 두자리씩 중복이 될 경우 #ff0처럼 줄여서 표현이 가능하다. rgb 표현법 ..
-
글꼴 관련 스타일프로그래밍/HTML&CSS 2022. 8. 29. 20:28
속성에 시작이 font인 경우 글꼴과 관련된 스타일을 다루는 속성이다. 대표적인 글꼴 관련 속성을 알아보자. font-family 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시되고 지정된 글꼴이 사용자 시스템에 설치되어있지 않다면 웹 문서에서 의도한 글꼴로 표시될 수 있다. 따라서 글꼴을 지정할 때 한가지 글꼴만 선택하기도 하지만 글꼴이 없을 것을 대비하여 예비 글꼴도 지정해줄 수 있다. font-family : | [, ] body{font-size: "맑은 고딕", 돋움, 굴림} font-size 글자크기를 조절 할 때 사용하는 속성으로 글자 크기의 단위는 px, pt, em 등과 백분율(%)도 있다. f..