본문 바로가기

html, css공부

 (13)
[css] 텍스트 속성을 알아보자(font-family, font-size, line-height, text-indent, font-weight...) 많이 사용하는 텍스트 속성 속성 설명 비고 font-family 어떤 폰트를 사용 할지 font-size 폰트의 크기 정함 웹단위 설정 font-style 폰트의 모양이 normal 또는 italic 또는 oblique인지 normal, italic, oblique font-weight 폰트의 두께 웹단위 설정 font-variant 영문 폰트 모양 조절 normal, small-caps line-height 텍스트와 텍스트 사이 간격 설정 웹 단위 설정 text-transform 영문자를 대문자, 소문자를 대문자 capitalize, uppercase, lowercase, none text-decoration 폰트의 밑줄 등 꾸밈 웹 단위 설정 word-spacing 단어 간의 간격 설정 웹 단위 설정..
[html] 에는 무슨 API가 있을까?? (드로그앤드롭,지오로케이션,웹캐시,웹스토리지,웹워커) HTML5의 가장 특징적인 API(Application Programming Interface)에 대해 알아보자 특정기능에 대한 API가 정의되어 있어 정의되어 있는 API 기반으로 프로그래밍 하면된다 대표적으로 드래그 앤 드롭(Drag&Drop), 지오로케이션(Geolocation), 웹 스토리지(Web Storage) , 웹 캐시(Web cache),웹 워커(Web Worker)가 있다 드래그 앤 드롭(Drag&Drop) '끌어다 놓기'이다 윈도우 이전 도스(DOS)환경에서는 모든 기능을 키보드를 이용해서 파일을 복사, 이동 , 삭제를 했지만 윈도우 출현 이후 파일의 복사,이동,삭제등이 아이콘 클릭 후 끌어다 놓는 방식이 가능해 졌다 웬만한 브라우저에서 다 HTML5의 드래그 앤 드롭이 사용되는 것은..
[css] 반응형 웹을 만들어보자(모바일,테블릿,데스크탑,미디어쿼리..) 반응형 웹이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라 화면 크기가 자동으로 변하게 만드는 기법이다 개인적으로 애플 공식홈페이지가 멋있는것 같다 요새 사이트에서 반응형웹은 필수이다. 알아보자 반응형 웹 디자인을 체크할 수 있는 가장 쉬운 방법은 크롬 브라우저를 사용하는 것이다 F12를 누르면 다음과 같이 html css 정보 및 모바일 화면을 볼 수 있다 일반인이라면 허겁지겁 꺼야되는 화면이지만 개발자는 유용하게 사용할 수 있다 가장 먼저 해주어야 할 것은 HTML파일 내부의 안에 다음과 같이 설정해 주어야 한다 @import url("main.css") only screen and (min-width:200px) and (max-width:480px); @me..
[css] 텍스트 문장 구성 관련 속성 (overflow , text-overflow, visibility, display...) overflow 속성 설명 visible 오버플로우된 항목을 잘라내지 않는다 hidden 오버플로우된 부분을 감춘다 scroll 오버플로우 속성에 강제로 스크롤 바를 생성한다 auto 오버플로우되면 자동적으로 스크롤 바가 생성된다 inherit 속성이 상속된다 visible default 값이다 .container{ width: 300px; //박스 크기 설정 height: 500px; overflow: visible; } 꾸역꾸역 넣어서 삐져나감을 볼 수 있다 scroll 강제 스크롤 생성 .container{ width: 300px; height: 500px; overflow: scroll; } text-overflow 속성 설명 clip 기본값으로서, 단순하게 텍스트틀 자른다 ellipsis 잘린부..
[css] flex 사용법 ② (order, flex-grow, flex-shrink, flex-basis, align-self) ①에서 컨테이너에 적용하는 친구들 이었다면 이번은 아이템들에게 적용해 준다 아 반드시 컨테이너에는 display:flex 가 있어야 한다 order 컨테이너 안 item 들에게 order(순서)를 줄 수 있다 .box{ order: 2; } .box2{ order: 1; } .box3{ order: 3; } 0이 default이며 음수 값을 가질 수 있다. 정해 준 숫자 순서 대로 정렬 가능하다 flex-grow 브라우저 크기를 늘리면 입력값에 따라 아이템이 늘어나게 할 수 있다 .box{ } .box2{ flex-grow: 1; } .box3{ flex-grow: 2; } defalut는 0이며 box2보다 box3이 두 배 더 커진다 flex-shrink 브라우저 크기를 늘리면 입력값에 따라 아이템이..
[css] flex 사용법 ① (flex-direction, flex-wrap, justify-content,align-items,align-content) flexbox 또는 flex 컨테이너와 그 내부에 들어 있는 아이템들을 효율적으로 배치하고 공간 활용이 자유로우며, 레이아웃을 편리하게 구성 할 수 있는 개꿀팁이다 하지만 IE버전에 따라 지원 안하는게 있으니 우리모두 익스플로어 지양 운동을 하자 위와 같이 컨테이너 안에 item이 배치 되어 있어야한다 .container{ display: flex; } 컨테이너에 flex속성을 반드시 주자 flex-direction 이 컨테이너 안 친구들에게 방향을 줄 수 있다 .container{ display: flex; flex-direction: row | row-reverse | column | column-reverse; //좌->우 //우->좌 //상->하 //하->상 } row가 기본값이고 가로값 colu..
[css] position 개념정리 (absolute, relative, fixed..) pisition은 float와 달리 박스 모델을 원하는 장소에 배치하는 것을 목적으로 한다 다른 박스 모델 위에 배치할 수도 있고 안움직이게 고정할수잇다 함 살펴보자 속성: absolute fixed relative static inherit 부속 속성: top left bottom right z-index 부속 속성은 속성이잇어야 작동하는 애들이다 속성 설명 absolute 처음 위치한 박스나 다른 조상요소 기준으로 절대위치 fixed 다른 조상 요소 기준으로 위치고정 /top, left, bottom, right 적용하면 절대 위치 배치되서 완전고정된다 relative 기본위치부터 top,left,bottom,right에의해 위치 결정 ↑애들이 없으면 static과 같은 속성이 된다 static po..
[css] float사용법, 반응형 웹 만들기 (right, left, none...) flex box라는 개꿀 기능이 나오기 전에는 flaot사용이 필수고 이래저래 손봐야 했다 레이아웃를 잡을 때 가장많이 사용하는 속성 중 하나다 빨리 알아보자 right, left ,none 이렇게 3가지 속성만 있다 none을 사용하게 되면 박스가 움직이지 않는다 사이드 바와 본문에 left와 right를 주어서 왼쪽, 오른쪽으로 정렬 되어있는 것 볼 수 있다 aside{ //사이드 바 float: left; //좌측정렬 width: 200px; min-height: 250px; } article{ //본문 float: right; //우측정렬 width: 580px; } 그치만 크기를 고정해 버리면 요즘 유행하는 반응형 웹사이트를 만드는데 제한 된다 사이드 바의 크기는 고정한 상태로 본문 크기만 가변..

티스토리툴바