본문 바로가기

WEB/HTML&CSS

 (22)
[HTML/CSS] #22.Semantic tag div를 너무 남발해서 사용하면 아무 의미없이 막 쓴 태그라는 인식이 강해진다. 이를 막고자 나타난 것이 Semantic tag이다. Semantic tag는 기존의 div태그에 의미를 부여해주기 위해 등장한 태그이다! 아래 이미지와 같이 의미를 부여하여 태그를 사용한다면 태그의 쓰임을 훨씬 수월하게 알아볼 수 있다.
[HTML/CSS] #21.Animations 앞서 배운 transformation에서는 마우스를 갖다 대야만 효과를 확인해볼 수 있었다. 마우스를 대지 않고도 애니메이션 효과를 줄 수 있는 방법은 없을까? 물론 있다. 다음의 코드를 보자. 코드를 보면 @keyframes라는 부분이 보인다. 이 부분이 바로 애니메이션효과를 정의하는 부분이다. 자세히 살펴보자. @keyframes CuteSugar { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } 구조가 보이는가? @keyframes 뒤에 애니메이션 이름을 정의하고 밑에 원하는 효과를 적으면 된다. 사용은 다음과 같이 쓰면 된다. img { border: 5px solid black; border-radius: 10%; an..
[HTML/CSS] #20.Tranformations transformation은 한 요소를 변형시킬 수 있다. 다음의 코드를 보자. 참고로 이미지 파일은 아무거나 사용하면 된다. img라는 요소에 transformation효과를 넣어주었다. 결과를 확인해보자. 보다시피 이미지가 회전하였음을 확인할 수 있다. rotateX(), rotateY(), rotateZ()함수에 의하여 x축 방향으로 30도, y축 방향으로 50도. z축 방향으로 10도로 회전한 것이다. 이처럼 CSS만을 가지고 3D의 영역까지 컨트롤 할 수 있다. rotate말고도 수많은 transformation이 있다. 코드를 다음과 같이 수정해보자. img { border: 5px solid black; border-radius: 10%; transform: scaleX(3); } 그리고 결..
[HTML/CSS] #19.Transitions 예전에는 애니메이션 효과를 주려면 자바스크립트를 이용했어야 했다. 하지만 요즘에는 CSS만으로도 애니메이션 효과를 주는 것이 가능하다! 다음의 코드를 보자. a { color: wheat; background-color: tomato; text-decoration: none; border-radius: 5px; font-size: 55px; } a:hover { color: tomato; background-color: wheat; } 아직 transition을 쓰지 않은 코드이다. 결과를 확인해보자. 처음에는 위와 같다가 마우스를 갖다대면 아래 이미지로 변한다! 서서히 변하지 않고 갑작스럽게 휙 바뀌는 모습이다. 그럼 이에 애니메이션 효과를 주고 싶다면 어떻게 코드를 짜야 할까? 스타일 시트의 a태그에..
[HTML/CSS] #18.Variable (Custom property) CSS에서도 변수를 사용할 수 있다는 사실을 알고 있는가? 다음의 코드를 보자. Life's not all gloom and despondency. website 여기서 --main-color이 변수다. CSS에서 변수를 쓰는 방법은 --를 먼저 써주고 변수이름을 써줘야 한다. 그리고 빈 공간이 있다면 -로 채워야한다. 따라서 --main-color라고 변수를 써준 것이다. 그리고 이 변수를 사용하려면 var(변수명)을 써주면 된다. 결과를 확인해보자. p태그와 a태그에 스타일이 적용되어 색이 바뀌었음을 확인할 수 있다!
[HTML/CSS] #17.Pseudo Selector2 우리가 앞서 배운 Pseudo Selector은 :(콜론)이 1개였다. 이번에는 콜론이 2개인 Pseudo Selector를 알아볼 것이다. 1. ::placeholder 다음의 코드를 보자. placeholder의 색을 yellogreen이 되도록 코드를 짜본 것이다. 결과를 확인해보자. 정말 placeholder의 색이 바뀌었다! 따라서 ::placeholder는 placeholder의 특성만 스타일링 하고 싶을 때 사용함을 알 수 있다. 2. ::selection 코드를 다음과 같이 작성해보자. Life's not all gloom and despondency. ::selection은 어떤 효과를 가져다 줄까? 백문이 불여일견이라고 직접 확인해보자. 다음과 같이 글씨를 마우스로 드래그하여 선택하니깐..
[HTML/CSS] #16.States 개발자 도구에서 확인할 수 있는 가장 중요한 selector는 state이다. 웹페이지에서 F12를 누르고 개발자 도구를 들어가서 확인해보자. 우측하단의 :hov를 눌러 확인해보면 다음과 같은 창이 뜬다. 위에 뜬 것이 state이다. 하나씩 살펴보자. 1.active 다음의 코드를 보자. 그리고 결과를 확인해보자. 박스를 마우스로 눌러보면 색이 바뀌는 것을 알 수 있다. active는 마우스를 클릭했을 때 적용됨을 알 수 있다. 2.hover 스타일 코드를 다음과 같이 살짝 바꿔보자. input:hover { background-color: tomato; } active대신 hover을 써줬다. 그리고 나서 결과를 확인해보자. 박스 위에 마우스 커서를 갖다대면 색이 바뀌는 것을 알 수 있다. hover..
[HTML/CSS] #15.attribute selector attribute selector은 말그대로 특정 속성을 선택하는 역할을 한다. Pseudo Selector의 일종이라 볼 수 있다. 다음의 코드를 보자. 그리고 결과를 보면 다음과 같다. 결과를 보면 알 수 있듯이 name이 들어간 input칸의 뒷배경의 색이 모두 핑크색으로 바뀌었다. 이는 다음의 코드 덕분이다! input[placeholder~="name"] { background-color: pink; } placeholder에 name이 포함되어있으면 뒷배경을 모두 핑크색으로 바꿔주라는 의미가 된다. 여기서 '~='는 포함되어있다는 의미다! attribute selector는 이것말고도 쓰임이 많은데 그 내용을 아래의 사이트에서 확인 가능하다. https://developer.mozilla.or..

티스토리툴바