본문 바로가기

CSS

 (28)
css -table 목록을 표현했을 때 항상 or 과 의 조합이 필요했듯이, 테이블을 표현하기 위해 여러 태그들의 조합이 필요합니다. , , , , , 등이 있습니다. 테이블은 항상 태그로 감싸져있습니다. 태그 내에 행도 만들고, 열도 만들게 되는 것입니다. 한 행을 시작할 때는 로 시작합니다. tr은 table row의 줄임말입니다. 각각의 셀은 태그 내에 태그를 사용합니다. td는 table data의 줄임말입니다. 이번에는 대신 태그를 사용했습니다. table heading의 줄임말입니다. th태그를 사용했더니 가운데정렬이 되고, 글씨 두께가 두꺼워졌습니다. 물론 td태그를 그대로 사용하고, css로 같은 효과를 낼 수도 있습니다. 나 태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 ..
css-list 목록을 표현하는 태그는 입니다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap.. Search까지 목록아이템 하나하나를 태그로 감싸줍니다. 그리고, 목록 전체를 태그로 감싸줍니다. 은 ordered list라는 의미로, 결과화면과 같이 목록에 숫자를 달아줍니다. 왼쪽 결과 화면을 보면, 우리는 숫자를 쓰지 않았는데 자동으로 numbering 되었네요. 하지만 우리가 원하는 것은 자동으로 numbering 되는 것이 아닙니다. ol 대신에 numbering이 되지 않는 ul 태그를 사용하겠습니다. 태그는 unordered list라는 의미입니다. 숫자 없는 목록을 표현해줍니다. List Set Has..
css-margin auto .center { margin: 20px auto; } 엇! 앞에서 margin을 배웠을 때 1개나 4개의 값을 주었습니다. 1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고, 4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다. 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼, 오른쪽에 주는 margin이라는 뜻입니다. 위의 css를 풀어쓰면 아래와 같습니다. .center { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto;
css -Block vs Inline 대부분의 HTML element(이하 요소)는 block 요소입니다. 예를 들어, , , , , , , 등이 모두 block 요소에 해당하는 태그들입니다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다. block 요소와 성질이 반대인 inline 요소도 있습니다. , , 태그 등이 inline 요소입니다. inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다. 첫 번째부터 네 번째까지는 태그 같은 block 요소입니다. 노란색 영역이 해당 요소가 차지하는 영역입니다. 텍스트는 짧은데 그 이상으로 영역을 차지하고 있습니다. block 요소들은 이런식으로 항상 새 줄에서 시작하며 좌우로 최대한 늘어납..
css - img 태그로 이미지 넣기
css 그룹핑과 CSS selector 그룹 이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용하고 싶습니다. 그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는 다음과 같이 한꺼번에 스타일을 지정할 수 있습니다. what-is-blockquote, span { color: green; } class나 id가 selector일때 태그와 결합할 수 있습니다. p.p-tag { color: gray; } p#third-line { text-decoration: underline; } 첫 번째는 p태그이면서 p-tag 클래스이다. 두 번째는 p태그이면서 third-line 아이디이다. 라는 뜻입니다. 엄청 길게도 작성할 수 있습니다. .a div .b .pre span { background-color: yellow; } 다른..
box-sizing box-sizing 속성은 적용되는 요소에 대해 box model이 처리되는 방법을 제어한다. 즉 요소의 너비와 높이를 계산하는 방법을 정의한다. 한 단계 더 풀어쓰면 width와 height에 padding과 border를 포함할지 여부를 결정하는 속성이다. 이 방법에 무슨 문제가 있느냐 하면, width: 100px; 을 선언하고 작업을 하다가 padding:10px; 을 추가하면 실제 너비가 120px이 된다. 여러 요소가 얽혀 있다면 깨진 레이아웃을 보며 하나씩 너비를 수정해나가야 할 것이다. 직관적이지도 않고 요소마다 값을 계산하기도 힘들다. box-sizing 속성엔 아래 두 가지 값이 쓰인다. content-box : 디폴트값으로 위의 너비,높이 공식이 적용된다. border-box : 너비..
css Border border:두께 선스타일 선색깔; p { border: 5px solid red; } 이런식으로 표현합니다. solid 외에도 dotted dashed solid double groove ridge inset outset border 만 디자인을 줄수있습니다. blockquote { border-top: 4px double red; border-right: 2px solid #666666; border-bottom: 6px dashed darkviolet; border-left: 1px dotted #00ee44; } 이런식으로 밑줄 태그대신에 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.

티스토리툴바