웹개발 한 번 해보겠습니다..

27-1. 반응형 웹 웹사이트를 방문하는 사용자마다 모니터의 해상도가 다르기 때문에 이를 고려해주어야 한다. 또한, 스마트폰이나 태블릿 등 모바일 기기는 모니터에 비해 화면이 작기 때문에 더욱 신경을 써야 한다. 이것을 해결해주기 위해 반응형 웹을 사용한다. @media ( max-width: 800px ) { div { background-color: black; } } 이런 식으로 @media를 사용하여 화면 크기 별 CSS 속성을 지정해준다. HEADER 팬다 주니어 스카피 케로 & 베로니 죠르디 앙몬드 안녕 니니즈 니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀..

26-1. CSS파일 분리 CSS를 HTML 문서에서 분리하여 별도로 관리할 수 있다. 26-2. @import 규칙 CSS에서 "@" 으로 시작하는 키워드들을 규칙이라고 한다. (전에 다루었던 @keyframes 도 이에 해당한다.) 1. 26-1에서 다룬 link 태그를 대신할 수 있다. 2. 태그 내부에 위치해야 한다. 3. 태그 상단에 위치해야 한다. 아래의 코드는 @import 규칙을 사용하였고 link 태그는 주석처리를 해주었다. HTML 파일 HEADER Section content FOOTER ex1.css 파일 #wrap #header h1 { background-color: #ffff00; text-align: center; height: 200px; } #wrap #section { ..

25-1. 변환 속성 과거 javascript에서만 구현이 가능한 변환(transform) 기능을 이제는 CSS3에서도 구현할 수 있다. skewX( ) : x축 방향으로 주어진 각도만큼 기울인다. scaleX( ) : x축 크기를 주어진 배율만큼 늘리거나 줄인다. scale(x,y) : 크기를 주어진 배율만큼 늘리거나 줄인다. translate(x, y) : 현재 위치에서 주어진 x축과 y축의 거리만큼 이동시킨다. rotate(n) : n도만큼 회전시킨다. 애니메이션 효과를 부여할 태그에 다음과 같은 속성도 넣을 수 있다. transform-origin : 가로 세로 (%단위를 사용. 좌측 상단 기준 0%, 0%이고, 우측 하단 기준 100%, 100%이다.) z-index : 겹치는 다른 요소와의 상..

24-1. 키프레임과 애니메이션 속성 키프레임을 이용해 애니메이션 속성을 적용할 수 있다. 애니메이션을 사용하고자 하는 태그에 animation-name, duration, timing-function 속성을 설정해준다. animation-name : 적용하고자 하는 애니메이션의 이름 duration : 애니메이션의 진행 시간 timing-function : 애니메이션 효과의 시간당 속도를 조절해준다. animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있다. (paused : 마우스 올렸을 때 애니메이션 정지) animation-iteration-count : 애니메이션 반복 횟수를 정해준다. (infinite :횟수 설정) animation-direction : 애니메이션 ..

23-1. 변형 기본 HTML 태그 요소의 속성 (형태, 색상 등)이 변경될 때, CSS 변형 속성을 적용하여 변화하는 단계에 움직임 (애니메이션)을 적용할 수 있다. 속성을 적용하고 싶은 태그에 기본적인 옵션을 먼저 설정해준다. transition-duration : 변형되는데에 걸리는 시간 transition-delay : 설정한 시간만큼 기다렸다가 동작한다. transition-timing-function : 변형 효과의 시간당 속도를 조절해준다. (ease-out은 천천히 끝나게) 그 다음 어떤 이벤트를 발생시켰을 때 변형을 줄지 설정해준다. hover : 마우스를 해당 태그에 올렸을 때 active : 해당 태그를 클릭했을 때 23-2. 변형 속성 transition-property는 각각의 속..

13-1. float 속성 float 속성은 요소의 위치를 설정해주는 속성이다. block type의 태그를 왼쪽으로 붙일 때 float: left를 많이 사용한다. float: left 속성을 감싸는 태그에 overflow: hidden 을 주면 float를 사용함으로 나타나는 부유하는 현상과 넘치는 현상을 잡아줄 수 있다. 떠내려 온 빙하에서 깨어난 공룡, 죠르디 빛나는 과거를 뒤로한 채 지금은 취업을 꿈꾸며 하루하루 열심히 삽니다. 이번에는 기본적인 홈페이지 레이아웃을 예시로 보자. HEADER NAVIGATION menu1 menu2 menu3 menu4 menu5 CONTENT BANNER FOOTER float: left 속성이 부여된 태그를 감싸는 태그에는 overflow: hidden이 부..

12-1. font-family, font-size 속성 글꼴 및 폰트 사이즈 관련 속성이다. font-family : 글꼴을 정해준다. font-size : 폰트의 사이즈를 정해준다. font-family는 여러개의 글꼴을 나열해주고 먼저 명시한 것부터 우선순위를 갖게 된다. font-size는 앞에서도 많이 사용했던 속성이므로 생략한다. 12-2. font-style, font-weight, line-height 속성 font-style은 글자 모양을 적용하는 속성으로 주로 italic (기울임)을 많이 사용한다. font-weight는 글자 굵기를 적용하는 속성으로 주로 bold (굵게)를 많이 사용한다. line-height는 줄 높이를 정하는 속성이다. 1.0일때 위아랫줄이 딱 붙게 되고 커질수..

11-1. margin 및 padding 속성 중요!! margin 및 padding 속성은 여러 번의 실습을 통해 익숙하게 해주어야 한다! margin은 공간의 밖에, padding은 공간의 안에 적용된다고 생각하면 된다. 8강에서 다뤘던 margin 사용법에 대해 보자. (padding도 규칙은 같다.) style 태그 안의 div에 주는 CSS 속성에서 margin: 30px 0 0 30px에 주목해보자. 여백을 위에는 30px, 오른쪽에는 0px, 아래에는 0px, 왼쪽에는 30px 준다는 의미이다. 위부터 시계방향으로 회전하여 위, 오른쪽, 아래, 왼쪽 순서로 명시해주면 된다. margin: 30px 20px 10px 의 경우에는 여백을 위에는 30px, 오른쪽에는 20px, 아래에는 10px,..