하얀이 코딩 블로그

미디어쿼리란, pc뿐 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위한 CSS구문이다. 브라우저 가로폭의 최소와 최대 사이즈를 지정하여, 그 사이즈에 맞는 브라우저 사이즈의 경우, 다른 css 속성을 입히는 것이다. 아래 코드를 이용하여 미디어 쿼리를 작성할 수 있다. @media (min-width: 최소) and (max-width: 최대) { ... } /* 브라우저의 너비가 최소~최대 범위에 포함되면 중괄호 속 속성을 적용한다.*/ .media { width: 500px; height: 500px; background-color: black; /* 기본 속성은 너비와 높이가 500px, 배경은 black */ } @media (min-width: 300px) and (max-width: ..

Animation은 transition과 비슷하지만 hover 기능을 사용않고 요소를 변화시킨다. Animation은 이름을 필수로 정의해줘야한다. 또한 @keyframes도 필수로 작성해야한다. @keyframes은 from과 to를 사용해 변화시킬 요소 속성의 처음과 끝을 지정한다. (예를 들어, 색상이 red(처음)에서 green(끝)으로. 혹은 넓이가 100(처음)에서 200(끝)으로) 다음과 같이 작성하면 된다. animation-direction 속성에는 alternate, normal, reverse가 있다. alternate: from -> to -> from normal: from -> to, from ->to reverse: to -> from, to -> from Animation 와..

Transition은 css의 속성에 변화를 줄 수 있다. 효과를 적용하고자 하는 속성, 효과 지속 시간, 효과의 속도 등을 지정한다. 사용법은 다음과 같다. 그렇다면 width를 어떻게 넓히냐, 가상 선택자 hover를 사용한다. hover는 '마우스를 요소에 올렸을 때' 라는 조건을 뜻한다. 즉, 위의 두 코드 블럭을 합치면 클래스가 transition인 요소에 마우스를 올렸을 때, 1초 후에 width 값이 500px로, 3초 동안, 일정하게 변화된다. .transition { transition: width 3s linear 1s; } .transition: hover { width: 500px; } 동일하게 이렇게 작성 가능하다.

Transform 속성을 통해 html 요소를 회전, 확대, 비틀기, 좌표 변경 등이 가능하다. 사용법은 다음과 같다. 브라우저 별로 덧붙이는 접두사가 다르다. -webkit-은 크롬과 사파리, -ms-는 익스플로러에서의 지원을 해주는 코드이다. 코드 실행이 잘 안 된다면 브라우저 별로 접두사를 붙여주면 된다.

박스모델 margin : border 바깥쪽의 여백 padding : border 안쪽의 여백 border : 테두리 2. 마진 병합 현상 어떤 박스의 margin-bottom: 100px 그 아래 박스의 margin-top: 150px 일 때, 두 박스 사이의 총 margin은 250px가 아닌 150px이다. 즉, margin이 겹치는 구간에선 숫자가 큰 margin 값으로 설정된다. 3. display 속성 display 속성 값은 block과 inline, inline-block 이 있다. p { display: inline; } /* p는 원래 block이다. p를 inline타입으로 바꾼다. */ a { display: block; } /* a는 원래 inline이다. a를 block타입으로 ..

CSS에는 세 개의 선택자가 있다. Type Class Id - Type은 특정 태그에 스타일을 적용하는 것이다. p { color: red; } /* 여기서 p 태그가 type이라고 보면 됨 */ - Class는 태그에 클래스를 부여하여 스타일을 적용하는 것이다. Hi /* 여기서 p태그의 클래스 이름을 css1로 지정 */ Bye /* 마찬가지 */ Class를 사용할 땐 클래스 이름 앞에 . (콤마)를 반드시 붙여야 한다. Class는 일반적으로 여러개의 태그에 같은 속성을 적용시키고 싶을 때 사용한다. - Id는 태그에 Id를 부여하여 스타일을 적용하는 것이다. ID hi /* p태그에 아이디 부여 */ Id를 사용할 땐 Id 앞에 #를 반드시 붙여야 한다. id는 일반적으로 한 개의 태그만 유일..

CSS 구성 선택자 { 속성: 속성값; } html에서 작성한 h1태그 안의 내용들을 꾸미려면 css파일에 아래와 같이 작성하면 된다. h1 { font-size: 15px; /* 글자 사이즈 */ font-family: sans-serif; /* 글꼴 */ color: red; /* 글자색 */ background-color: blue; /* 배경색 */ text-align: center;/* 텍스트 정렬. center는 중앙 */ } 작성된 css파일을 html파일과 연동시키려면 태그로 불러오면 된다. css파일을 따로 만들지 않고 html 파일에서 스타일을 적용시킬 수 있다. color 이런식으로 원하는 태그 안에 style을 적용시킨다. 또한 html내의 이때는 중괄호를 사용하여 css파일 내에서..

HTML의 구조 생성을 위한 태그 ... ... 주소: 어쩌구 저쩌구 이메일: cnessit@gmail.com - Block, Inline 요소 Block 요소는 태그 처럼 y축 정렬 (줄바꿈 현상) Inline 요소는 태그로 사용 가능하며 한 줄 출력 hi bye hi bye

웹사이트 제작이 건물 짓기라고 생각했을 때, HTML은 건물 설계도 CSS는 인테리어 디자인 HTML이란? Hyper Text Markup Language의 약자이다. - HTML 기본 태그 구성 contents - HTML 문서 기본 구조 contents - 태그: 글자나 이미지 클릭 시 다른 사이트로 이동 내 블로그 - 태그 - 그 외 기본 태그 안녕하세요 안녕하세요 반갑습니다 리스트 리스트 리스트