sy의 코딩 개발일지

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..

ex3.html button checkbox 말티즈 푸들 리트리버 radio 예 아니오 reset search time url week datetime datetime-local email file hidden hidden filed는 사용자에 표시되지 않는다. image 정리 check,radio value 서버에 전달될 값 checked 기본으로 선택하고 싶은 항목 name radio 전용,여러 옵션의 공통이름 number,range min 최소값(기본값 0) , max 최대값(기본값 100) strep 조정할 단위값(기본값 1) value 초기값 submit,reset value 버튼에 표시할 내용 image src 이미지 경로 alt 대체 텍스트 button value 버튼에 표시할 내용 oncl..

ex1.html header section article aside footer 웹페이지 구조를 짰어요 article vs section article 내용이 독립적이고 홀로 설수 있는 내용 section 서로 관계있는 문서를 분리하는 역할 여러개의 section을 article로 묶을 수도있고 마찬가지로 여러개의 article을 section으로 묶을 수 있다. section vs div 내용 관계 O -> section 의미적으로 관계 X -> div strong vs b strong 해당 콘텐츠의 중요성 강조 b 텍스트 자체 강조 em vs i em 의미적인 강조 i 단순 문자열 스크린 리더에서 또렷한 차이를 볼 수 있다. strong vs em em 구어체 강조와 같이 문장의 의미를 변경하는 데 ..