DOTY

지속적으로 업로드 할 계획이다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 1. codepen CodePen: Online Code Editor and Front End Web Developer Community CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 다른 사람이 만든 HTML, CSS, JS 코드들을 사용할 수 있는 곳. 예시를 하나 보면 Box Shadows에..

1. '>' 사용 일일히 직접 쓰는게 너무 귀찮은건 다들 알것이다. 그럴때 사용해보자!!! nav>ul>li*4 이걸 쓰면 어찌 되느냐!? 만족. (참고로 nav는 navigation으로 다음과 같은걸 만들고 싶을 때 쓴다.) NAVER밑에 로그인, 부동산, 연예 처럼 표현하고 싶을때. 2. box-sizing 이런 느낌으로...???? 그럴때 사용하는 것!!!! width: 100%; 를 넣어주자. .... 는~ 원래 말하려던건 아니고... 저걸 넣어주게 되면 끝이 사라졌다....??? 이는 padding을 넣어줬기 때문인데 이를 고치기 위해선 다음 코드를 넣어주자. box-sizing: border-box; 이걸 넣어주면~ 이렇게 된다!!! 이 기능은 box사이즈를 미리 정해둔다고 생각하면 된다. 크..

좀 더 쉽게 읽는 CSS를 위한 규칙이라고 보면 된다. 참고로 btn은 버튼을 말하는 것이다. 1. block : .btn 2. Element : .btn__price 3. Modifier : .btn--orange (밑줄이 아님) (각각은 class name이다.) 1. block block하면 생각나는 그 블록 생각하는게 쉬울 듯 하다. 뭉텅이???? (....큼흠....) 2. Element Element는 block의 구성 요소라고 생각하자. 3. Modifier Modifier은 어떤 스타일인지(?) Block과 Element의 모양을 생각하면 될 듯 싶다. 아래를 보자. btn이라는 block이 있는데 이를 구성하는 Elements들(btn__price, btn__text)과, Modifier..

Media Query는 CSS를 이용해 사용자의 스크린 사이즈를 알아내는 방법이다. 화면의 크기에 따라서 어떤 식으로 CSS를 적용할 것인지 정할 수 있다. 일단 간단하게 가운데에 네모로 시작. 여기서 브라우저 창을 키우거나 줄일 때 저 네모의 색을 변경시킬 수 있다. 우선, 시작 전 준비된 코드다. body { display: flex; height: 100vh; align-items: center; justify-content: center; } div { background-color: darkgreen; width: 200px; height: 200px; } body 에는 div 아무것도 안쓴 것 딱 하나만 있다. 여기서 다음을 추가해보자. @media screen and (max-width: 6..

Transform을 Combine하는건 마우스를 올려놓는 등 조건이 있었다. 이는 Animation이라고 하기 어렵다. 만약!!! 자기 혼자 움직이는 Animation을 만들고 싶으면 어떻게 해야할까..!? 오늘도!!! 이거를 가지고 놀것이다. (TMI : 내가 찍은거다) 애니메이션은 hover 등등을 사용하지 않아도 자동으로 움직인다. img { margin: 100px; border: 5px black; border-radius: 50%; animation: Gaegul 5s ease-in-out infinite; } @keyframes Gaegul { from { transform: rotateX(0); } to { transform: rotateX(360deg); } } 애니메이션을 사용하기 위해..

Transformation - img를 변화시킬때 쓰는 듯 하다. 이 사진을 가지고 놀아보자!! 지금은 그냥 평범한 상태의 사진인데 Trnasformation을 사용해서 다양하게 바꿀 수 있다. 원 모양으로 바꿀수 있고, 화면을 기울게 만들거나, 돌릴 수도 있다. 하나씩 해보자!!! 우선, 그림을 원 모양으로 바꿔보자. 이건 앞에서 했던 border을 조절한다. border-radius: 50%; 로 설정하면 이렇게 변한다! img { border: 5px, black; border-radius: 50%; //등등 써있음 } (사실 50% 이상으로 넘어가면 어떤 변화가 있는지 내 눈으로는 잘 모르겠다..ㅎㅎㅎㅎㅎㅎㅎ..) radius가 커질수록 사각형에서 원으로 천천히 변한다. 1. rotateX, Y,..

뭔가 자연스럽게 보여주기 위한 기능....?? 이랄까 예시를 들어보자! a { color: white; background-color: blueviolet; text-decoration: none; } a:hover { color: blueviolet; background-color: white; } 개굴개굴은 개굴개굴로 코딩되어 있다. 기본 설정은 위와 같고 전 게시글에서 볼수 있지만 다시 얘기 하자면 hover은 마우스를 위에 올렸을때 보여지는 것이다. 근데 너무 딱딱한 느낌이다!!!! 고로 더욱 자연스럽게 만들어주자. a { color: white; background-color: blueviolet; text-decoration: none; transition: background-color 3s..

브라우저의 개발자 도구로 들어가게 되면 해당 페이지의 state를 볼 수 있다. 본인은 Microsoft Edge를 사용합니다. 왼쪽처럼 확인할 수 잇는데, :hov를 누르게 되면 5개의 state들을 확인할 수 있다. active : 버튼을 클릭할 때 나오는 액션이다 hover : 버튼 위에 마우스를 가져다 댔을 때 나오는 액션이다. 그런데 hover를 설정 하고, 마우스를 위에 가져다 대면 버튼 자체가 default로 바뀌게 된다. 스타일을 새로 만들어줘야 한다. focus : 키보드로 선택 되었을 때 말하는데 에를 들면 Tab키가 있다. visited : 링크에 적용되는 액션이다. 링크를 누른 후에 바뀌게 된다. focus-within : 자식이 focus(클릭이든 뭐든) 받으면 부모가 변하게 된다..

Combinator 부모 안에 있는 자식을 바꾸고 싶은데 부모 밖에 있는 요소는 바꾸게 하고 싶지 않을때 어떻게 할까!!!! (뭔소리지..) //대충 뭔가 써있음 child 밖의 span 말고 p안의 span만 바꾸고 싶으면 어떻게 할까!!!! p span { // 바꿀 내용 } 위 처럼 부모 안의 자식만 바꿀 수 있다. 그런데 쓰다보면 조금 문제가 생긴다. 예를 들면 다음과 같다. HELLO!!! //대충 뭔가 써있음 child div span { // 바꿀 내용 } div 바로 아래에 있는 span (HELLO!!!) 만 바꾸고 싶은데 위처럼 쓸 경우에는 의 자식인 span (child) 까지 동시에 바뀌게 된다. 다음과 같이 수정할 수 있다. div span{ // 바꿀 내용 } div p span..

이번에도 CSS! Position 위치를 어떤 식으로 정할지 설정해준다. 예를 들어서, 고정시킬 수도 있도 유동적으로 변하게 할 수도 있다. Position의 기능중 몇가지를 알아보자. 1. Fixed 이건 단어 뜻 그대로 고정하는 것이다. 스크롤을 내려도 요소는 고정되어 있는데 참고할 것은 가장 처음 위치에서 변하지 않는다는 점이다. 요런 느-낌? 위와 같은 경우에는 top: 200px; 를 추가해줬다. 즉, 가장 위에서 200px만큼 떨어진 상태에서 fixed 된것이다. 2. static 처음에 설정된 위치를 가리킨다. 3. relative 원래 위치에서 본인이 조금만 위치를 변경하고 싶은 경우에 쓰인다. top, left, right, bottom 모두 설정이 가능하다. div { position:..