Study/HTML & CSS
-
Learn HTML & CSS. 14.TablesStudy/HTML & CSS 2016. 12. 22. 12:55
Review what I learned 태그로 표를 만들 수 있다. 태그(table row)는 표에 행을 추가해준다. tr 태그로 추가한 행에 태그(table data)로 데이터를 추가할 수 있다. (열과 비슷) 표에서의 헤딩(heading)은 해당 행, 열의 의미를 정해준다. 태그로 추가할 수 있다. td 태그에 rowspan 속성을 추가하여 여러 행에 걸쳐 데이터가 표시되게 할 수 있다. 예. data td 태그에 colspan 속성을 추가하여 여러 열에 걸쳐 데이터가 표시되게 할 수 있다. 예. data 표를 만드는 태그들은 세 영역으로 구분할 수 있다. head, body, footer head 영역은 태그로 감싸서 구성한다. body 영역은 태그로 감싸서 구성한다. footer 영역은 태그로 감..
-
Learn HTML & CSS. 13.Adding ImagesStudy/HTML & CSS 2016. 12. 16. 12:37
Review what I learned Image 의 크기는 width 와 height 속성으로 조절할 수 있다. background-image 속성을 통해 어떤 태그에든 배경 이미지를 넣을 수 있다. (CSS) 예. background-image: url:("이미지 주소"); background-repeat 속성을 통해 background-image 를 반복하게 할 수 있다. (image가 작을 경우) repeat(기본 값)(x축, y축 반복), repeat-x(x축만 반복), repeat-y(y축만 반복), no-repeat(반복 X) background-position 속성을 통해 반복하지 않는 배경 이미지가 어떻게 위치할 지를 정할 수 있다. 예. background-position: center..
-
Learn HTML & CSS. 12.Layout(*)Study/HTML & CSS 2016. 12. 14. 13:23
Review what I learned position 속성은 태그의 위치를 세가지 방식으로 지정할 수 있게 해준다. position 속성을 relative 로 설정하면 해당 태그의 위치가 상대 위치가 된다. (기본 위치가 기준) 태그에 top, bottom, left, right 값을 설정할 수 있게 되며, 이는 좌표설정과 비슷하다. (예. top: 240px; 의 경우 해당 태그가 240px만큼 내려와있게 된다.) position 속성을 absolute 로 설정하면 해당 태그의 위치가 절대 위치가 된다. (기본 위치를 기준) 태그에 top, bottom, left, right 값을 설정할 수 있게 되며, 해당 페이지에서 위치가 고정되지만, scroll할 경우 밖으로 같이 나가게 된다. position..
-
Learn HTML & CSS. 11.Changing the Box modelStudy/HTML & CSS 2016. 12. 13. 14:53
Review what I learned 기본적으로 설정된 박스 모델의 width와 height는 테두리의 두께에 영향을 받는다. box-sizing 속성을 통해 브라우저에서 박스의 크기를 조정하는 방식을 변결할 수 있다. box-sizing 의 기본값은 content-box 이다. 우리가 새로 사용할 box-sizing 의 값은 border-box 이다. border-box 값은 테두리의 두께나 padding 에 영향을 받지 않는다. content-box 로 할 때 표현되는 width 예. width를 200px, border를 1px, padding을 왼쪽, 오른쪽 10px씩 설정할 경우 200 - (1 + 1) - (10 + 10) => 178px 이 실제 content의 width가 됨 => bor..
-
Learn HTML & CSS. 10.Content(Padding, Margin)Study/HTML & CSS 2016. 12. 8. 12:59
Review what I learned Padding 은 박스의 테두리와 내부 컨텐츠 사이의 공간 크기이다. Padding 은 모든 방향을 똑같이 설정하거나, 각각을 따로따로 설정할 수 있다. Margin 은 박스의 테두리와 그 외부 컨텐츠 사이의 공간 크기이다. Margin 도 역시 모든 방향을 똑같이 설정하거나, 각각을 따로따로 설정할 수 있다. Padding 와 Margin 의 설정 방법은 동일하고, Padding과 Margin만 바꿔주면 되므로 하나로 설명한다. 1. 모든 방향 똑같이 설정 padding: 10px; 2. 각 방향 다르게 설정 padding: 5px 3px 5px 2px; (위 오른쪽 아래 왼쪽) 3. 개별로 설정 padding-top: 5px; (padding-right, pad..
-
Learn HTML & CSS. 9.BordersStudy/HTML & CSS 2016. 12. 6. 16:42
Review what I learned 각 태그들을 감싸는 박스의 테두리도 style 할 수 있다. 테두리의 두께는 border-width 속성으로 바꿀 수 있다. pixels 단위를 사용하여 설정하거나 thin, medium, thick 중 한가지를 설정해도 된다. (예. border-width: 5px; border-width: thick;) 위와 같이 설정하면 모든 테두리의 두께를 한번에 설정하게 된다. 네 방향 각각의 테두리의 두께를 다르게 하고 싶다면 4개를 설정해주면 된다. (border-width: 3px 1px 2px 1px;) 이는 각각 위, 오른쪽, 아래, 왼쪽 을 가리키며, 위에부터 시계방향으로 알면 된다. border-width 를 개별로 설정 할 수 있다. border-방향-wid..
-
Learn HTML & CSS. 8.Box modelStudy/HTML & CSS 2016. 12. 5. 15:28
Review what I learned 모든 HTML 요소들은 박스로 둘러싸여져 있다. 박스는 2차원으로 width와 height 성분이 있다. 이들은 각각 width 속성과 height 속성으로 설정이 가능하다. width, height 속성들은 pixels, ems, percentages 의 세 단위로 입력될 수 있다. 이는 px, em, % 이다. 박스들의 width와 height의 최댓값, 최솟값을 설정할 수 있다. 이는 사용자들이 브라우저 크기를 조정할 때 내용들이 읽기 쉽게 유지될 수 있도록 도와준다. 각각 max-width max-height min-width min-height 로 설정할 수 있다. 박스의 크기가 너무 작아지면, 내용들이 잘려서 보이지 않게 된다. 이를 조절할 수 있는 속성..
-
Learn HTML & CSS. 7.Classes, IDs & DivsStudy/HTML & CSS 2016. 12. 2. 11:49
Review what I learned ID와 클래스, Div 를 사용하여 구성된 코드는 가독성이 매우 좋아진다. ID 는 HTML 해당 태그를 페이지에서 식별할 수 있게 해준다. Class에 포함된 태그들은 같은 style을 공유하게 된다. 그로 인해 styling 하는 것이 더 효율적이게 된다. (division) 는 내부의 태그들을 그룹으로 묶어준다. 이는 페이지를 논리적 단위로 구성할 수 있게 해주어서 HTML 파일의 가독성을 더 늘려준다. 한 HTML 태그가 여러개의 클래스에 포함될 수 있다. Div 태그는 아주 많이 쓰이는 HTML 태그이다. 웹 개발자에게는 "이 태그를 어떻게 쓰는 지"가 매우 중요하다. 출처 : codecademy(HTML & CSS)