본문 바로가기
반응형

즐거움 넘치는 IT 세계72

[ CSS 입문 ] clear속성 | 개요 float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 중간에서 끊기(제거)위해 사용됩니다. 방향에 따라 3가지 속성으로 사용됩니다. left : 왼쪽 부유 제거 right : 오른쪽 부유 제거 both : 양쪽 모두 제거 | 예제 This is first line with floating image. This is second line with cleared property. | 결과값 This is first line with floating image. This is second line with cleared property. | 레이아웃에서의 clear float 속성이 레이아웃에서 많이 사용되고 있는데, clear속성도 float를 레이아웃에서 사용하며 발생되는 문제를 해결하기 위.. 2018. 9. 17.
[ CSS 입문 ] float 속성 | 개요 float 라는 단어는 원래 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit : 부모 요소에서 상속 left : 왼쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display속성은 무시. none : 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display속성은 무시 됩니다. (none 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니.. 2018. 9. 16.
[ CSS 입문 ] display 속성 | 개요 display 속성은 요소를 어떻게 보여줄 것인가를 결정합니다. 주로 4가지의 속성값을 사용하고, 이외에도 다양한 속성값들이 존재하는데 실무에서도 객체들을 보여주는 방식에 따라 다양하고 많이 사용되는 속성 중 하나 입니다. 입문부분이기에 기본적인 속성값 4가지만 소개하겠습니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간형태 | 사용법 none 태그가 보이지 않게 되고, visibility 속성중 hidden 으로 설정한 것과 달리 영역조차 사라지게 됩니다. block , 태그 등이 이에 해당됩니다. 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈이 되어 보입니다. wid.. 2018. 9. 15.
[ CSS 입문 ] visibility 속성 | 개요 visibility 속성은 태그의 가시성을 결정합니다. 다음 속성 4가지 값을 가지며, 기본 값으로는 inherit 입니다. visible : 보임 hidden : 숨김 (자신의 영역은 지속됨) collapse : 겹치도록 지정 (테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소에 지정하면 hidden으로 해석) inherit : 부모 요소의 값을 상속 | 예제 | 결과값 2018. 9. 14.
[ CSS 입문 ] border 속성 | 개요 border 속성은 태그의 테두리를 설정하는 속성으로, background속성 과 비슷하게 세부적인 속성들을 한번에 사용할 수 있습니다. 예전부터 지금까지도 많이 사용되는 table태그에서의 border와 비슷한 세부 속성을 가지고 있으며 이제 테이블이 아닌 다른 객체에서도 border 속성을 이용하여 문서나 표를 작성 할 수 있습니다. 주로 " border: 선두께 선스타일 선색상; "의 순서로 작성되며 전체의 테두리가 아니라면 각 방향별로 따로 테두리를 줄 수 있습니다. border-width : 테두리 두께 border-style : 테두리 스타일 border-color : 테두리 색 border-radius : 모서리 각 border-top : 윗쪽 테두리 border-bottom : 아.. 2018. 9. 13.
[ CSS 입문 ] background 속성 | 개요 background 속성은 태그의 배경을 지정하는 속성입니다. 한번에 여러가지 속성을 사용할 수 있습니다. background-color : 배경색 background-image : 배경 이미지 background-size : 배경 이미지 사이즈 background-repeat : 배경 이미지 반복 background-position : 배경 이미지 위치 | 사용법 background-color 배경색을 의미하며, 값은 color속성의 포맷을 사용합니다. 색상을 사용할때 그라디언트 속성을 이용할 수 도 있는데 이는 'background-image' 에서 넣을 수 있습니다. background-image 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다. 이때엔 'backg.. 2018. 9. 12.
[ CSS 입문 ] text-align 속성 | 개요 text-align 속성은 텍스트의 정렬을 의미합니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 중앙 정렬 justify : 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리) | 사용법 #box1 { text-align: right; } /*box1 아이디 선택자의 텍스트를 오른쪽 정렬로 하라*/ #box2 { text-align: left; } /*box2 아이디 선택자의 텍스트를 왼쪽 정렬로 하라*/ #box3 { text-align: center; } /*box3 아이디 선택자의 텍스트를 중앙 정렬로 하라*/ 우리가 편하게 사용하는 워드나 엑셀 같은 프로그램에 많이 사용했을 법한 텍스트 정렬은 많이들 알고 있는 기능일 것으로 생각됩니다. CSS에서는 위와 같이 .. 2018. 9. 11.
[ CSS 입문 ] font속성 | 개요 font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다. 정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 사용이 가능합니다. font-style : 이탤릭체 등의 글꼴 스타일을 지정 font-weight : 글자 두께 (숫자 또는 bold, normal 등) font-variant : 글꼴 변형 (소문자를 대문자로 바꾸는 등) font-size : 글자 크기 line-height : 줄간격 font-family : 글꼴 (굴림, 돋움 등) letter-spacing : 글자 간격 text-decoration : 글자 데코 (밑줄, 윗줄, 중간줄 등) | 사용법 font-style 글꼴의 스타일로 주로 이탤릭체(기울여 .. 2018. 9. 10.
[ CSS 입문 ] color 속성 | 개요 color 속성은 단어 뜻대로 색상이지만 CSS에서는 더 정확하게는 "글 색상" 입니다. red, blue 등 이미 정의된 색 #000, #ffffff 등의 16진수 색상 코드 rgb(255, 255, 255) 등의 rgb색상 rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba색상 color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit 으로 부모의 색상을 가져옵니다. | 사용법 * { color: red; } /*전체(*)에 글 색상 red를 주어라*/ #text1 span { color: #0A0; } /*text1의 아이디 하위 span태그에 글 색상 #0A0를 주어라*/ div#text1 { color: rgb(0, 0, 150); } .. 2018. 9. 9.
반응형

티스토리툴바