본문 바로가기
반응형

CSS34

[ 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.
[ CSS 입문 ] margin, padding 속성 | 개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. 한 선택자의 바깥쪽으로 여백을 넣고 싶다고 한다면 "margin" 한 선택자의 안쪽으로 여백을 넣고 싶다고 한다면 "padding" 으로 기억을 하면 쉽습니다. 단, 여기서 바깥쪽 여백을 주는 margin을 입력한다면 선택자의 전체 width값에는 변화가 없습니다. 바깥쪽을 기준으로 여백을 주므로써 선택자의 위치를 변경해줄때 사용될 수 있습니다. 안쪽 여백을 주는 padding의 경우 선택자의 전체 width값이나 height값이 변경이 됩니다. 기존 width값과 height값을 유지하고 싶다면 padding을 준만큼 width와 he.. 2018. 9. 8.
[ CSS 입문 ] CSS 속성 | 개요 HTML과 비슷하게 CSS도 특정한 기능을 하는 속성들이 미리 정의가 되어 있으며, 이를 잘 활용하여 태그의 스타일을 정의 할 수 있습니다. "속성 : 값"의 형태로 사용되며, 여러 속성끼리는 ; (세미콜론)을 통해 구분됩니다. 하나의 선택자의 속성들을 한줄로 쓰든, 여러줄로 나누어 쓰든 상관 없으며 작업자의 편의에 따라 작성하면 된다. 선택자{ 속성1: 값1; 속성2: 값2 } /* or */ 선택자{ 속성1: 값1; 속성2: 값2; } 브라우저의 개발자툴을 이용하면, 특정 태그에 어떤 CSS 속성이 사용되었는지 쉽게 알 수 있습니다. 그리고 브라우저 내에서 미리 스타일을 변형해보고 추가적인 브라우저의 특정 앱들을 이용하면 바로 코드로 저장되어 사이트에 적용까지도 가능합니다. 이 방법을 가지고.. 2018. 9. 7.
반응형

티스토리툴바