sy의 코딩 개발일지

폰트 변경하기 선택자{font - famiily:1순위 폰트,2순위 폰트 ,3순위 폰트} 글자와 글자 사이 간격 조정하기 선택자{letter-spacing:숫자 px 또는 em 등} 줄 간격 조정하기 선택자{line-height:값 단위} HTML 엘리먼트의 위치 변경하기 static position값이 static이면 top,left,right,bottom 속성이 적용되지 않는다. absolute 부모 엘리먼트의 position 속성값이 absolute , fixed, relative인 엘리먼트 안에서 자신이 원하는 곳에 해당 박스를 위치 시킬수 있다. relative 자신의 위치를 기준으로 이동 fixed 스크롤하여 페이지의 어디에 위치하든 관계없이 해당 엘리먼트가 화면 위치에 고정 배경 꾸미기 배경..

CSS단위 px rem em % px rem html태그에 명시된 크기의 배수를 기준 html태그에 font-size:10px지정 1rem = 10*1 2rem = 10*2 3rem = 10*3 1rem 2rem 3rem em 부모태그에 적용된 값을 기준 2em rem단위는 html태그에 적용된 값을 기준 em단위는 부모 태그에 적용된 값을 기준 html 10px .three 10*3 =30px .two 30*2 =60px % 부모태그의 길이를 기준으로 산정하여 크기를 가짐 메뉴만들기 메일 카페 블로그 지식iN 쇼핑 사전 뉴스 증권 부동산 지도 영화 뮤직 책 웹툰 레이아웃 만들기 house search me Hello World 복습! 미디어쿼리 사용방법 1 HTML5 CSS3 JavaScript jQu..

요소의 위치 설정 1.외곽선 주기 div{border: 굵기 선스타일 색값} 선스타일 solid : 그냥 한줄 dotted : 점으로 표현. dashed : 점선으로 표현. double : 두 줄로 표현. groove : 입체감 있게 표현. ridge : 볼록하게 표현. inset : 들어가 보이게 표현 outset : 튀어나오게 표현 2.모서리를 둥굴게 하기 div{border-radus:값} 값이 클수록 더 둥근모양으로 변한다. 3.이미지를 배경으로 넣기 div{background-image:url('주소');} 4.이미지 반복 설정 div{background-repeat:값} repeat:가로와 세로로 계속 반복 no-repeat: 한번만 나타남 repeat-x:가로 방향으로 반복 repeat-y:..

text 꾸미기 hello world 텍스트 스타일에서 inherit 부모태그의 font-style속성의 값을 그대로 적용한다는 의미이다. ex) hello world hello world 텍스트 굵기 font-weight hello world - bolder hello world - lighter 여러개 요소 넣는법 텍스트의 색상 color red hello world hello world hello world green hello world hello world hello world blue hello world hello world hello world 비교 p{letter-spacing:px} //텍스트 자간 지정하기(글자와 글자의 간격을 지정) p{word-spacing:10px} 띄어쓰기의 길..

출처:www.pinkcoding.com 아주 유용한 사이트를 찾았다. 이걸 보면서 공부! html문서에 적용하는 방법은 3가지가 있다. 1. 외부문서로 저장하여 연결하기 2. 문서 내부에 저장하기 3.태그에 직접 지정하기 CSS선택자1(tag,class,id) 태그명을 선택자로 선택 (tag) 태그에 클래스 속성을 지정하여 선택자 사용(class) hello world in list hello world in h1 태그에 아이디 속성을 지정하여 선택자 사용(id) id는 고유한 값으로 오직 한번만 사용한다. class는 여러번 가능 hello world CSS 선택자2(*,child) 모든 태그 선택하기(*) 자식 태그에 CSS적용 h1 tag in section tag h1 tag in aside ta..