html과 css

TIL]미디어쿼리

미디어쿼리 웹에서 접속을 할 때 개개인의 모니터의 크기가 틀리거나 모바일, 태블릿 pc, 데스크톱, 랩탑 등 다양한 기기로 이용하기 때문에 현재 화면의 크기를 감지하고 화면 너비에 따라 다른 css 스타일을 적용할 수 있습니다. 아래 예제를 살펴보겠습니다! @media screen and (max-width: 480px) { body { background-color: green; } } 우선 미디어쿼리를 사용할 때 @media라고 적어줍니다. screen and 부분을 보시면 max-width가 480px로 되어있는데 480px보다 작은 화면 즉, 스마트폰에 대한 규칙을 정의하는 것입니다. 위의 예제와 같이 실제로 적용할 css 규칙은 미디어쿼리의 중괄호 안에 적어주고 미디어쿼리가 충족되면 이 규칙들이..

TIL] details와 summary

detail 인터넷을 하다 보면 펼치기 버튼을 눌러 숨겨져 있던 내용이 출력되는 걸 자주 볼 수 있다. 이러한 걸 해주는 것이 detail이다. 예제를 통해 살펴보자. 숨겨진 내용 위의 예제는 사진과 같이 p태그가 숨겨져 있다가 세부 정보를 클릭했을 때 펼쳐지면서 숨겨져 있던 p태그가 나오게 된다. summary 위의 예제를 살펴보면 세부정보라고 따로 기입한 흔적조차 없는데 웹에선 세부정보라고 나타나고 있다. 이 세부정보를 바꾸려면 어떻게 해야 할까? summary를 사용하면 된다. 아래 예제를 살펴보자. 클릭하세요! 안녕하세요! 위의 예제에선 세부 정보 summary안에 써넣은 클릭 하세요! 가 표시되는 것을 볼 수 있다. open 위의 예제들은 클릭을 해야만 펼쳐졌다! 하지만 처음 웹에 들어갔을 때 ..

TIL] flex

flex flex는 Flexible Box, Flexobx라고도 불리며 flex는 레이아웃 배치 전용 기능으로 고안되었다. 토이 프로젝트를 하면서 flex를 이용하였는데 매우 편리하였다! flex 관련 속성을 아래에서 살펴보자. flex-wrap flex-wrap은 요소들을 정렬하는 것이라고 생각하면 된다. flex-wrap 속성은 정렬된 요소들의 총넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해준다. flex-wrap은 display:flex;와 함께 사용한다. 아래의 예제를 살펴보자. 1 2 3 4 5 위의 코드와 코드의 결과 화면이다. 위의 코드에 flex-wrap을 적용하면 어떻게될까? 아래 예제를 살펴보자. 1 2 3 4 5 flex-wrap을 적용하면 위와 같이 나란히 정렬..

TIL] border

border border속성은 기초적인 속성이지만 다루지 않았기에 한번 다뤄보고 싶고 또한 토이 프로젝트를 진행하면서 border에 대해 공부해서 자세히 알아보고 싶었다. border는 테두리를 만드는 속성이고 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정한다. border 속성 값 border-width: 테두리의 두께 정하고 기본값은 medium이다. border-style: 선의 모양을 정하고 기본값은 none이다. border-color: 선의 색을 정한다. initial: 기본값으로 설정한다. inherit: 부모 요소의 속성 값을 상속받는다. border-style none dotted dashed solid double groove ridge inset outset border-style은 눈..

TIL] table

table table은 표를 만들어주는 html태그이다. 표뿐만 아니라 갤러리도 만들 수 있고 다양하게 응용이 가능한 태그이다. 테이블의 구성 요소 테이블은 여러 가지 구성요소가 있다. 아래에서 살펴보자 : 테이블을 만드는 태그 : 테이블의 헤더 부분을 만드는 태그 : 테이블의 행을 만드는 태그 : 테이블의 열을 만드는 태그 테이블을 만들 때는 순서가 있다. 테이블의 순서는 다음과 같다. 제일 바깥 쪽에 이 들어가게 되고 가장 위에 라는 테이블 헤더 태그를 사용한다. 그다음은 행을 만드는 태그가 들어가게 되고 tr태그 안에는 열을 만들어주는 태그가 들어가게 된다. 테이블 코드 블록 테이블예제 입니다. 1번칸 2번칸 2번줄 1번칸 2번줄 2번칸 위의 예제처럼 코딩을 하게 되면 아래와 같이 표시된다. 테이블..

TIL]first-child, last-child 선택자

가상 클래스와, 가상 요소를 쓰는 이유 타입 선택자, id, class 선택자, 전체 선택자로는 구체적인 작업을 할 수 없는 부분들을 작업하기 위해 사용한다. 예를 들어 어떤 요소도 첫 번째 줄만 선택해서 스타일을 주는 방법이 없는데 가상 클래스와 가상 요소를 사용하면 구체적으로 집어 스타일을 주는 것이 가능해진다. first-child first-child는 부모 요소 안에 있는 첫 번째 자식만을 선택할 수 있는 선택 자이다. 사용방법은 간단하다. 요소:first-child {속성: 속성 값;} 코드로 살펴보자면 아래와 같이 사용하면 된다. html 예제 1번예제 2번예제 3번예제 4번예제 예제입니다. 1번예제입니다. 2번예제입니다. 3번예제입니다. 4번예제입니다. css p:first-child{co..

TIL] html에 video 넣기

video태그 html에서 비디오를 올리려면 어떻게 해야 할까? 비디오 태그를 활용하면 된다. 비디오 태그의 예제를 살펴보자

TIL] form

form 폼은 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용된다. 폼은 입력된 데이터를 한번에 서버로 전송한다. 전송한 데이터는 웹서버가 처리하고, 결과에 따른 또 다른 웹페이지를 보여준다. 폼의 동작방법부터 살펴보도록 하자. form 동작 방법 폼이 있는 웹페이지를 방문한다. 폼 내용을 입력한다. 폼 안에 있는 모든 데이터를 웹 서버로 보낸다. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘긴다. 웹프로그램은 폼데이터를 처리한다. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다. 웹서버는 받은 html 페이지를 브라우저에 보낸다. 브라우저는 받은 html 페이지를 보여준다. 폼의 동작방법은 위의 순서를 거쳐 html페이지를 보여주게 된다! form태그 속성 ..

TIL] css단위 vh와 vw

vh 반응형으로 웹디자인을 할 때는 아무래도 픽셀 단위가 아닌 % 단위를 많이 사용한다. 하지만 css의 퍼센트 값이 모든 문제를 해결할 수 있지는 않다! css의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받기 때문이다. 이럴 때 vh가 상대적으로 많이 쓰인다. vh 요소는 높이값의 100분의 1단 위이다. 예를 들어 브라우저 높잇값이 700일 때 1vh는 7px이라는 뜻이다. vw 그렇다면 높이값 말고 뷰포트의 너비 값으로 적용하려면 어떻게 해아 할까? vw를 사용하면 된다. vw 요소는 뷰포트의 너비 값의 100분의 1단 위이다. 예를 들어 뷰포트의 너비 값이 700px이면 1vw는 7px이라는 뜻이다. 뷰포트란 무엇일까? vh단위를 쓸 때 브라우저의 높이는 어떤 건지 알지만 vw단위를 쓸..

TIL] em과 rem

em em은 현재의 font-size를 정의한다. 예를 들면 body태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다. test 위의 예제를 보면 div에 폰트 사이즈를 2em으로 지정했다. 위의 예제는 2px(body태그의 폰트 사이즈)를 기준으로 2배의 폰트 사이즈로 표현이 된다. 결과적으로 4px의 크기가 된다. 즉 em은 1em = 부모의 폰트 크기라는 계산법을 가지고 있다. 대부분의 브라우저에서 폰트 크기의 디폴트 값은 16px이기 때문에 별도로 지정하지 않는다면 1em은 16px이 된다. rem rem은 relative to the root element의 줄임말인데 HTML 문서에서 최상위 요소(root element)는 바로 요소를 가..