WEB/HTML+CSS

[HTML+CSS] Media Query, Viewport

1. 미디어쿼리 (Media Query) 미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문으로 특정 조건에서만 CSS 코드를 적용시켜 준다. min-width : 최소 너비 max-width : 최대 너비 min-height : 최소 높이 max-height : 최대 높이 aspect-ratio : 가로세로비 orientation : 방향 @media (조건) { 속성 } ex .media { width: 500px; height: 500px; background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { .media { width: 300p..

[CSS] CSS 애니메이션 (Transform, Transition, Animation)

Transform, Transition, Animation은 전부 css3 의 언어에 등장하는 속성 1. Transform transfrom은 특정 영역을 회전시키거나, 확대/축소 시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용 1.1 rotate, scale, skew, translate .transition { transfrom: rotate(45deg); /* 회전 */ transform: scale(2,3); /* 확대 축소 */ transform: skew(10deg, 20deg); /* 각도 변경 */ transform: translate(100px; 200px); /* 위치 변경 */ } .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능 ..

[CSS] Layout 설정

Position 속성을 이용한 Layout position: static; /*기본값 */ posistion: relative; /*top과 left에 의해 원래있던 위치에서 상대적으로 움직임*/ posistion: absolute; /*기본 레이어의 관계에서 벗어나게된다. 혼자 공중에 떠있는 느낌.. 따라서 다른것들이 absolute를 무시하고 그 자리를 채워가는..*/ -> absolute 속성은 자신의 기준점을 찾는데 static이 아닌 것을 찾는다. 원래 기준인 div가 static이기때문에 div가 아닌 body가 기준이 됨. posistion: fixed: /*스크롤이 생길때 움직이지 않는다. 고정됨. static이 아닌 것을 기준점으로 찾는다.*/ css.test.html first seco..

[CSS] CSS color, font style 적용

1. color style 적용 color : red; color : rgb(255,0,0); color : rgb(255,0,0,0,5); /*희미해짐. 투명도 */ color : #ff0000; /*15진수로 표현*/ color : #f00; 2. font style 적용 font-size:1em; /*em 갖게되는 기본 상속값의 배수값으로.*/ background-color : red ; /* 배경색. color랑 비슷 */ font-family : monospace; /* 글씨체 지정*/ test => 이경우 body > div에 16px이 적용됐으므로 그 16px을 기준으로 2배인 32px로 글씨가 나오게됨

[CSS] CSS 기본개념과 렌더링원리

CSS를 HTML에서 사용하는 방법 CSS 기본사용법 span { color : red; } selector(선택자) property value 1. inline html 태그 안에다가 같은 selector로 동일한 속성값에 다른 value를 넣을 땐 inline이 "최우선"으로 적용됨 구조랑 css 태그가 섞여있어서 관리가 어렵고 유지보수가 어렵다. 2. internal 예제 css_test1.css div>p{ color:red; /*inline이 최우선으로 적용되기 때문에 이는 적용되지 않음*/ border: 1px solid slategray; } CSS에서의 상속개념 상위에 설정된 style을 하위에서도 쓴다. -> 재사용 측면에서 좋다. color, font-size같은 대부분의 속성은 상속을..

[CSS] HTML 웹 페이지에 style 주기

1. 웹 페이지 개요 레이아웃을 보통 수평으로 나누는 것이 좋음 큼지막하게 나누고 그 안에서 또 자잘하게 수직과 수평으로 세부적으로 나누기. 네비게이션바, 섹션, 어사이드 style 태그 하이퍼링크 설정 a {text-decoration:none} 네비게이션바 리스트 #header_nav { width:100%; overflow:hidden; background-color:#2d1152; } #header_nav ul{ overflow:hidden; } #header_nav li{ font-size:0.9em; color:#ffffff; margin-right:20px; list-style:none; float:left; } li 태그에 list-styl:none; 을 주면 리스트 옆에 동그라미를 없앨 ..

[HTML] HTML 태그 정리

태그는 로 속성은 - , 속성의 자세한 건 * 로 표시함 list 관련 태그 ul, or, li : unorder list. index가 없음 : order list. index 있음. 알아서 넘버링 붙여서 출력함. : , 상관없이 list를 나타내는 태그 dl, dt, dd : 앵크 태그. 하이퍼링크, 링크거는 태그. - href : 링크걸어서 넘어갈 때 주는 링크 주소. - target : _blank (새 창 열림) / _self (지금 현재보고 있는 문서에서 열림) 표를 나타내는 태그 유지보수가 어렵고, 나중에 테이블의 전체적인 구조를 바꾸는 등 한계가 있어서 예전보다 사용빈도가 많이 줄었다. : 행 : 열 - colspan : 열을 합치는 속성 - rowspan : 행을 합치는 속성 이미지를 나..