Front-end/HTML + CSS11 HTML/CSS - 꿀팁(Tips) 1. VSCode를 사용한다면 - html파일을 생성한 후 !(느낌표)만 입력하고 엔터를 치면 기본 html 형식이 자동 생성된다. 2. BEM(Block Element Modifier): CSS에 가독성을 주는 표현법 - 자식 엘리먼트를 나타내는 표현법(부모엘리먼트 이름__자식엘리먼트 이름) - 속성을 나타내는 표현법(엘리먼트명--속성값) * 꿀 Tip - 모든 이름은 class 명이다. 뭐가 id이고 name이고 class인지 CSS를 작성하거나 읽을 때 헷갈리니까 개발자들 사이에서 이미 모든 엘리먼트는 class명을 사용하도록 통일하였다. 3. 웹 폰트를 사용할 때는 link보다 import 형식을 사용하는 것을 권장한다. 4. script 태그는 body 태그를 닫기 직전 부분에 삽입되어야 한다... 2020. 9. 11. HTML/CSS - Media Query(반응형 웹사이트 만들기) 1. Media Queries - Media Query는 오직 CSS만을 이용하여 웹사이트를 보고있는 사용자의 스크린 사이즈를 알 수 있는 방법이다. 이를 이용하여 사용자의 스크린에 맞게 엘리먼트를 다르게 출력하는 반응형 웹사이트를 만들 수 있다. - 위의 코드에서 처럼, 사용자의 브라우저의 너비가 800px미만인 경우 사각형의 바탕색이 토마토색으로 변하고 800px이상인 경우에는 청록색으로 바뀌게 된다. [작성 형식] @media mediaType and (속성: 속성값) and (속성: 속성값)... { 엘리먼트 { 적용할 속성 및 속성값; } } - 미디어type은 screen, print, speeach가 있다. - 다양한 속성값을 사용하여 만든 예시를 살펴보자. 예시 1) 화면너비 범위 정하기 .. 2020. 8. 30. HTML/CSS - Animation 1. Animation - 이전 포스팅에서 언급했던 Transition과 Transformation은 특정 행동과 같은 발동 조건을 기반하여 상태의 변화를 animation으로 표현하는 방법이었다. - 이와 다르게, animation은 아무 조건없이 계속적으로 작동되는 것을 의미한다. 그렇다면 예시를 통해서 예시 1) x축을 기준으로 360도 회전하는 animation [Animation 작성 방법 - 위의 코드를 참고하세요.] 1. @keyframes 어노테이션을 부여하고 animation이름을 정의한다. 2. animation의 시작과 끝을 정의한다. 3. 정의한 animation이 적용할 엘리먼트에 animation 속성을 정의한다. 적용할 수 있는 속성값은 아래와 같다 - 위의 코드에서 infin.. 2020. 8. 30. HTML/CSS - Transition & Transformation 1. Transition - Transition은 엘리먼트 상태의 변화를 애니메이션을 통해 표현하는 방법이다. (아래 사진참고) Go Home - Transition 속성값을 사용하기 위해서는 몇가지 규칙이 있다. 먼저 형식이다. 형식) transition: 속성/all 시간 ease-in/ease-out/ease-in-out - 그 다음은 Transation을 작성해야 되는 위치와 작성 규칙이다. Transition을 사용하기 위해서는 반드시 기존상태와는 다른 상태가 적용되는 CSS가 작성되어 있어야 한다. Transition은 반드시 root CSS에 작성되어야 한다. a{}에 적혀야지 a:hover{}에 적히면 안된다. hover에 입력하면 마우스가 올려져 있는 동안은 trasition이 작동을 하.. 2020. 8. 30. HTML/CSS - CSS Variable 1. Color - CSS에서는 색상이 매우 중요한 요소이다. IDE자체에서 제공하는 색상도 많지만 제한적이라는게 사실이다. 그렇다면 어떻게 다양한 색상을 구현할 수 있을까? CSS에서 색상을 표현하는 방법은 3가지가 있다. 1) 16진수 표현법 - 색상을 16진수로 표현 2) RGB 표현법 - 색상을 R(red), G(green), B(blue)의 비율로 표현 3) RGBa 표현법 - 색상을 R(red), G(green), B(blue)의 비율과 alpha(투명도)를 표현 2. CSS Custom Properties - variable(변수) - CSS에서도 변수를 사용할 수 있다. 어떻게 사용하고 왜 사용하는지 알아보자. - 예를 들어, 토마토 색상을 메인으로 하는 웹사이트를 제작한다고 해보자. 그렇.. 2020. 8. 27. HTML/CSS - State & 속성 선택자(selector) 1. State - 어떤 웹사이트를 개발자 도구를 통해 살펴보면 확인할 수 있는 가장 중요한 selector(선택자)는 state이다. - 위의 사진에서 보이는 것처럼 state에는 active, hover, focus, visited, focus-within이 있다. 이를 버튼을 통해 살펴보자. 1) active - 버튼을 클릭했을 때 작동 Hello 2) hover - 마우스 커서를 버튼 위에 올렸을 때 작동 - hover가 작동되면 default border가 적용되기 때문에 설정해 놓았던 둥근 테두리가 없어진다. 그러므로 hover가 작동할 때의 테두리 모양을 따로 적용해야 한다. 3) focus - 입력란에 커서가 놓여있게 하는 기능으로, 사용자를 입력란으로 유도한다. - Tab키를 눌렀을 때,.. 2020. 8. 26. HTML/CSS - Pseudo selectors(선택자) 1. Pseudo selectors (선택자) - CSS에서 특정 엘리먼트를 선택하기 위해서 아이디는 #아이디명으로 클래스는 .클래스명으로 명시한다. 아이디는 고유값으로 1개의 엘리먼트만 선택되지만, 클래스는 해당 클래스명을 가진 모든 엘리먼트가 선택된다. 상황에 따라 특정 클래스만을 선택하고 싶은 경우가 발생할 수 있다. 이럴 때 사용하는 기술이 pseudo selector이다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected eleme.. 2020. 8. 25. HTML/CSS - Position (relative&absolute) 1. Position - 웹 사이트를 만들 때, 여러가지 요소를 사용한다. 이 요소들을 조금씩 개발자가 원하는 위치에 배치하기 위해서 사용하는 속성중 하나가 position이라는 속성이다. 사용할 기본 구조는 아래 사진과 같다. 1) position: fixed; - fixed속성값을 사용하면 스크롤을 내려도 요소의 위치가 고정되어있게 된다. - fixed 속성값을 이용하기 위해서는 알아야 할 중요한 것이 있다. 바로, layer가 달라지는다는 것이다. 예시) 두개의 div태그가 있다. 1번 태그는 일반적인 div이고 2번 태그는 fixed 속성값을 적용한 태그이다. 그러므로 스크롤을 움직이면 1번 div는 제자리에 있고 2번 div는 고정된 자리에 그대로 위치한다. 하지만, 2번 div는 1번div의 .. 2020. 8. 24. HTML/CSS - Inline_block & Flex_box 1. inline-block - style에 있는 display속성을 이용하면 inline을 block처럼 block을 inline처럼 이용할 수 있다. - 그러나 block타입을 inline속성으로 바꿔주면 화면에 잘 보이지 않는다. (아래 사진참고) -위의 사진은 div 3개를 그대로 출력한 것이다. 이를 inline 속성으로 바꿔주면 아래의 사진처럼 제대로 출력되지 않는 것을 볼 수 있다. - 이런 문제를 해결하기 위해 display속성에 inline-block이라는 속성을 이용하여 해결한다. 이를 이용하면 block을 inline 형식으로 출력할 수 있게 된다. (아래 사진 참고) - 하지만, inline-block 속성에는 문제가 많다. 위의 사진에서 볼 수 있듯이, 개발자가 만들지 않은 공백이.. 2020. 8. 24. 이전 1 2 다음
