[WEB]/[HTML & CSS]

[HTML & CSS] viewport

1. 뷰포트란 무엇인가? 태그의 name="viewport"는 모바일 브라우저의 뷰포트 크기 조절을 위해 존재합니다. viewport란 사용자에게 보여지는 디스플레이상의 표시 영역을 의미합니다. 데스크탑의 viewport는 브라우저 창의 viewport와 같고, 사용자가 브라우저 창의 크기를 조절할 수 있습니다. 하지만, 모바일의 경우 veiwport창보다 크거나 작을 수 있기 때문에 두 손가락 줌인, 줌아웃등을 이용하여 화면을 조정합니다. 2. 필요한 이유 viewport가 필요한 이유는 데스크탑에서 보는 화면을 모바일로 봤을 때 잘 볼 수 있게 하기 위해서 입니다. 모바일 페이지를 접속할때 원하는 화면은 다음과 같은데 viewport를 설정하지 않게되면 다음과 같은 일이 발생합니다. 위 사진과 같이 ..

[HTML & CSS] CSS 박스모델 관련 속성

이전글 CSS 박스모델의 연장입니다. 1. 경계선 바깥 여백 margin 2. 경계선 안쪽 여백 padding 3. content의 폭과 높이 : width & height 4. 폭과 높이 1. 경계선 바깥 여백 margin 경계선 바깥 위쪽 여백 (margin) 지정 : margin-top 경계선 바깥 오른쪽 여백 (margin) 지정 : margin-right 경계선 바깥 아래쪽 여백 (margin) 지정 : margin-bottom 경계선 바깥 왼쪽 여백 (margin) 지정 : margin-left 경계선 한꺼번에 바깥 여백 (margin) 지정 : margin 예시-각각의 여백에 대해 세세히 지정) 경계선 바깥여백 (margin) CSS3란? 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시..

[HTML & CSS] CSS 박스모델

이전글 경계선(border) 다루기의 연장입니다. 모든 HTML Tag들은 block 또는 inline형태를 가집니다. 이러한 HTML 태그들은 모두 박스(box)로 여겨질 수 있고 이것을 박스모델이라고 합니다. CSS에서 이것을 수정할 수 있습니다. margin : 책페이지의 여백이라는 뜻으로, 경계선으로부터 바깥 여백 border : 경계선 padding : 솜 또는 충전제라는 뜻으로, 경계선으로부터 안쪽 여백 content : 사용자에게 보여지는 내용 예시) Box box의 구성성분 Content 결과) 위키독스

[HTML & CSS] 경계선(border) 다루기

이전글 CSS 배경(background) 다루기의 연장입니다. 1. 경계선 선 모양(style) 지정 2. 경계선 선 두께(width) 지정 3. 경계선 선 색깔(color) 지정 4. 경계선 속성 축약하기 1. 경계선 선 모양(style) 지정 경계선 위쪽 모양(style) 지정 : border-top-style 경계선 아래쪽 모양(style) 지정 : border-bottom-style 경계선 왼쪽 모양(style) 지정 : border-left-style 경계선 오른쪽 모양(style) 지정 : border-right-style 경계선 모양(style) 한꺼번에 지정 : border-style 속성 none : 기본값(모양 없음) hidden : 경계선 숨김 solid : 실선 double : 두줄..

[HTML & CSS] CSS 배경(background) 다루기

이전글 CSS 색상(color)다루기의 연장입니다. 1. 배경색 지정 2. 배경 이미지 지정 3. 배경 이미지 반복 여부 및 방향 4. 배경 이미지 위치 표기 5. 위의 속성들을 축약하기 1. 배경색 지정 예시) 배경색 지정 배경색과 관련된 스타일 지정방법을 공부하고 있습니다. 결과) 2. 배경 이미지 지정 - background-img : url("이미지 url주소") 예시) 배경색 지정 태그에 배경이미지를 class접근자로 지정했습니다. 결과) 3. 배경 이미지 반복 여부 및 방향 배경이미지 반복의 기본값은 가로방향입니다. 다른방향으로 반복하거나 반복을 안하게 할 수 있습니다. 가로방향 : background-repeat : repeat-x; 세로방향 : background-repeat : repea..

[HTML & CSS] CSS 색상(color) 다루기

이전글 CSS3를 HTML5에 적용하기의 연장입니다. 배경색 지정 background-color : 색상명1; 예시) 색상 연습 결과) 경계선 색상 지정 border : 1px solid 색상명; 예시) 색상 연습 결과) 글자 색상 지정 color : 색상명1; 예시) 색상 연습 결과) 색상 값 표시 color : 색상명; color : rgb(255, 99 ,71); color : #ff6347 color : hsl(9, 100%, 64% color : rgba(255, 99 ,71, 0.6); 더욱 상세히 색상을 표시할 수 있습니다. 위키독스