css
-
VS Code 웹 페이지, JS 를 Code Tab에서 미리보는 ExtensionEtc. 2019. 4. 15. 10:47
HTML, CSS, JS 등 Front End 개발을 할 때 VS Code를 자주 사용합니다. 이때 바로바로 결과를 보면서 개발하는 게 편한데요, 이때 활용할 확장 프로그램에 대한 글입니다. 우선 HTML과 CSS만을 Preview할 수 있는 Extension이 따로 있습니다. Live Server Preview(링크) 이 Extension을 실행하면 VS Code의 탭이 뜨고 그곳에서 HTML과 CSS를 적용시킨 화면을 바로 볼 수 있습니다. 하지만 JS의 경우에는 작동하지 않았습니다. 다른 Extension을 사용해주어야 합니다. 1. Browser Preview(링크) 2. Live Server(링크) 먼저 1번은 Web을 VS Code 내에서 볼 수 있게 해주는 Extension입니다. 2번은 현..
-
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..