CSS 박스 속성 HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다. ㄴ padding속성은 내용과 테두리 사이의 간격을 지정 ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정 ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정 요소의 위치 설정 - position 속성 HTML 요소를 배치 할 때 기준이 되는 위치로, 위치 설정 방식을 지정 position : static | absolute | relative | fixed ; static => 페이지의 정상적인 흐름에 따라 현재의 위치를 요소의 위치로 결정, 별도로 위치 지정/변경 불가(top,bottom,left,right 속성값 무시)(기본값) absolute ..
프로그래밍언어/CSS
CSS 박스 속성 HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다. ㄴ padding속성은 내용과 테두리 사이의 간격을 지정 ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정 ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정 요소의 크기 설정 내용이 표시되는 영역의 폭과 높이를 지정 css의 width, height 속성은 그림, 표, 각종 버튼, 문단 등의 다양한 요소에 크기를 지정 가능 min, max를 붙여서 최소폭, 최소높이, 최대폭, 최대높이를 지정할 수 있다. width : | | auto ; height : | | auto ; => px, pt, cm 등으로 크기를 지정 => 포함하는 블록에 대한 백분율..
CSS 박스 속성 HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다. ㄴ padding속성은 내용과 테두리 사이의 간격을 지정 ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정 ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정 margin 속성 박스 테두리 밖의 여백을 지정. margin : 상(top) 우(right) 하(bottom) 좌(left) margin : 상 좌우 하 margin : 상하 좌우 margin : 상화좌우 margin-top, margin-right, margin-bottom, margin-left 각자 지정 가능 2개 이상의 박스가 인접 한 경우 : 아래마진과 위마진 중 큰 값을 갖는 하나의..
CSS 박스 속성 HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다. ㄴ padding속성은 내용과 테두리 사이의 간격을 지정 ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정 ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정 display 속성 요소를 위해 사용할 박스의 종류를 지정 속성 값으로 inline의 올 경우 width/height 속성을 지정 할 수 없고, margin 속성은 좌우로만 적용 할 수 있다. inline-block, block의 경우 width/height, margin 속성을 정상적으로 지정 할 수 있다. display : none | inline | block | inline-block |..
CSS 텍스트 속성 letter-spacing, word-spacing 속성 문자(letter)나 단어(word) 사이의 간격 지정. letter-spacing : normal | ; word-spacing : normal | ; normal => 기본 간격을 사용(글자 사이 추가 간격 없음, 단어 간격 : 0.25em) => 숫자로 간격 지정. 음수값을 갖는 경우에는 간격이 좁아져 글자나 단어가 겹쳐서 표시 될 수 있다.(EX. 음수값을 갖는) line-height 속성 문장의 줄 간격 지정. line-height : normal | | | % ; normal => 기본 간격을 사용 => 현재 글꼴 크기에 대한 상수 배로 지정 => px, pt, cm 등으로 간격 지정 % => 현재 글꼴 크기에 대한 ..
CSS 글꼴 속성 웹페이지의 텍스트에 대해서 글꼴, 글자 크기, 굵기 등과 같은 스타일을 지정하기 위해서 font(글꼴)속성이 있다. font-family 속성 글자체(폰트)를 지정. 시스템에 해당 글씨체를 지원하지 않을 경우를 대비해 여러 개의 글자체를 동시에 지정하면, 쉼표로 구분한 폰트를 나열 된 순서대로 폰트의 지원 여부에 따라 앞에 오는 폰트를 사용한다. font-family : | ; => 'arial', '궁서체'와 같은 구체적인 폰트의 이름을 지정. 폰트명 사이에 공백이 있는 경우에는 따옴표('',"")를 사용. => 'serif'(명조 계열), 'sans-serif'(고딕 계열), 'cursive'(필기체), 'fantasy'(장식이 된 글꼴), 'monospace'(일정한 공간으로 된 ..
CSS 색상 속성 색상 지정 방식 색상명 색상 이름에 해당하는 영어 단어를 써준다. 16진수 색상 RGB에 해당하는 16진수를 #RRGGBB와 같이 표현하는 방식이다. 두 자리 숫자가 동일한 경우에는 #RGB로 표시 할 수 있다. RGB 색상 RGB의 값을 0~255 사이의 10진수로 표시 하는 방법이다. rgb(R,G,B)에서 RGB에 해당 10진수를 넣어주고 백분율로 rgb(R%, G%, B%)로 표시 할 수 있다. RGBA 방식도 제공되는데 여기서 A(alpha)는 투명도를 지정하는 것이다. 0.0(완전 투명) ~ 1.0(기본값, 완전 불투명)사이의 값으로 지정한다. rgba(R, G, B, A)로 지정한다. 색상명 별 정의 된 키워드 색상명RGB(16진수)색상색상명RGB(16진수)색상 aqua#0..
CSS 개요 CSS의 필요성과 개념 CSS의 정의 방법과 HTML 문서에서의 적용 방법 활용 다양한 CSS 선택자의 종류를 이해하고 활용 1. CSS란? HTML 4.01에서는 태그나 태그의 align 속성을 사용해서 스타일을 지정했다. 하지만 최근의 웹 표준 개발 방법론에서는 문서의 내용, 표현, 동작을 서로 분리해서 나타내도록 하고 있다. 즉 문서의 내용은 HTML을 이용해 정의하고, 화면에 표현은 CSS를 이용하고, 동작은 JS를 이용해서 정의하도록 한다. CSS의 사용은 다음과 같은 장점들을 갖는다. HTML으로 표현 할 수 없었던 다양한 스타일을 적용 할 수 있다. 한 번의 속성 정의로 여러 요소 및 여러 문서에서 사용 할 수 있어 전체적인 디자인에 통일성을 줄 수 있다. 웹 문서의 내용과 스타..
CSS의 개요 및 특징 HTML 속성의 디자인적 한계를 극복하기 위해 CSS가 개발됐다. 디자인의 시간이 줄어들고, 문서의 로딩속도가 빨라 진다. 스타일 : 문서의 글꼴, 크기, 간격등의 출력형태(레이아웃)에 영향을 미치는 요소 스타일시트 : 스타일의 내용만을 별로로 모아서 head태그 영역에 선언한 형태 CSS 적용방법 1. 인라인방식(style속성을 이용) 특정한 태그에만 스타일을 적용시키고 싶을 때 사용한다. 형식) style="속성명:값;속성명2:값2~" ex) style="font-family:궁서체;background:yellow;color:red" 동일한 태그에 같은 스타일을 하나하나 적용하는건 좋은 방법이 아니다. 동일한 태그에 임베디드방법과 중복이 되는 경우 인라인 방법이 우선순위가 높다..
CSS코드의 재사용 코드 중복의 제거가 필요한 이유 웹페이지마다 동일한 CSS코드를 하나하나 붙여넣고 수정하려면 오래 걸린다. 웹페이지마다 중복 된 태그를 제거해서 관리하는 것이 효율적이다. CSS 코드 중복 된 부분 제거하는 방법(CSS 링크코드) 1. style.css 파일 만들어서 중복된 스타일 코드 붙여 넣기. 2. html파일에 스타일태그 대신 링크코드 넣기. 3. 링크코드를 추가한 HTML파일마다 css문법이 적용되어있다. 코드를 재사용하는 것이 편한 이유 html 코드창의 깔끔해져 가독성이 올라간다. css코드 수정시 한 번만 수정하면 전체페이지에 적용되어 유지보수가 편해진다. 새로운 웹페이지에도 이미 만들어 놓은 css코드를 재사용하기 쉽다. html파일안에 css 직접 놓는 것보다 훨씬 ..
