CSS
-
카카오톡 클론 코딩 #15 네비게이션 바 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 21. 01:32
이번 포스팅에서는 네비게이션 바를 만들어 보도록 하겠습니다. 앞선 포스트에서 했던 방식대로, 제일 먼저 CSS폴더에 nav-bar.css라는 새 파일을 만들고, style.css에 nav-bar.css를 @import합니다. 그럼 네비게이션 바에 배경색을 지정해주면, 네비게이션 바가 잘 선택 되어있는 지 확인할 수 있습니다. 상태표시줄, 헤더, 네비게이션바는 화면을 스크롤하더라도 그 자리 그대로를 지키고 있습니다. 그래서 position: fixed;를 이용하여 자리를 고정시켜 주겠습니다. (body의 padding에 둘러싸여 있도록 한 설정 제거) position: fixed는 기존에 있던 위치에서 다른 위치에 고정시키도록 설정한 것이기 때문에, position: fixed를 쓸 때는 꼭 width를 ..
-
카카오톡 클론 코딩 #12 resetCSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 18. 01:46
이번 포스팅부터는 CSS를 작성해 보겠습니다. 그 전에, CSS를 작업하기 위해서, resetCSS라고 불리는 것을 불러(import) 오도록 하겠습니다. 큰 파일인 resetCSS는 모든 스타일 값을 0으로 바꿔줍니다. 앞서 작성했던 수많은 HTML 태그들은 이미 스타일을 가지고 있습니다. ex. magin(마진), padding(패딩) 등 index.html, 채팅창의 검사(N)을 살펴보면, 헤더부분의 h1태그는 글자 크기와, margin, 마진이 따로 설정되어 있고, 네비게이션바에서 ul태그에서도 padding, margin의 값이 설정되어 있습니다. 위와 같이 스타일의 이미 설정되어 있는 값들을 사용하지 않고, reset하고 싶을 때(default값을 0으로 설정할 수 있지만..) resetCSS..
-
고급 CSS 정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 6. 05:10
지금까지 (1)트랜지션, (2) 트랜스포메이션, (3) 애니메이션, (4) 미디어쿼리를 배웠습니다. (1) 트랜지션, Transition: 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과, 예를 들어, hover(마우스 커서가 박스 위에 있을 때)하면 변화가 일어나게 할 수 있습니다.(2) 트랜스포메이션, Transformation: element의 모양을 변형하게 하는 효과, 예를 들어, 뒤집거나, 비틀거나(skew), 크기를 키우거나, 줄일 수 있습니다.그리고 트랜지션-트랜스포메이션을 합쳐서 사용해 보았습니다. 즉, 트랜지션하는 순간에, 모양새가 변형되는것(트랜스포메이션)되는 것으로, hover할 때 회전시킬 수 있습니다. (3) 애니메이션, anmation: @keyframes을 만..
-
Media Queries,이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 5. 05:05
아이폰 같은 모바일 환경은 작은 화면이고, 모니터와 같은 데스크탑 환경은 큰 화면입니다. 화면의 크기에 따라서 CSS가 달리 쓰이기 때문에(큰 스크린을 위한 CSS와 작은 스크린, 화면을 위한 CSS가 다릅니다), 이번시간에는 브라우저가 큰 지 작은 지를 알아내는 방법에 대해 배우도록 하겠습니다. 먼저 배경색을 초록색이라고 해 보겠습니다. 여기서 유저가 모바일 환경이라고 한다면, 우리가 보는 화면의 최소값은 320px이고, 최대값은 640px일 때 HTML body의 배경색이 파란색이 되도록 하기 위해, @media screen and (min-width:320px) and max-width:640px) {body{background-color: blue;}} 라고 쓰겠습니다. 그럼 화면을 크게 하면, ..
-
Animations, 애니메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 4. 04:40
이번시간에는 hover state 아니더라도, 변화가 계속 나타나길 원할 때, 즉, rotate를 반복하고 싶을 때 사용할 수 있는 애니메이션, animation을 배워보도록 하겠습니다. 저번시간과 다르게, 애니메이션을 만들기 위해서는 CSS에게 애니메이션을 생성했다는 것을 알려 주는 @keyframes, 키프레임을 작성해야 됩니다. 그런 다음, 애니메이션의 이름을 적어 줍니다. 예를 들어, 이름을 scaleAndRotateSquare라고 하겠습니다. 애니메이션은 2단계, (1) from, (2)to가 필요합니다. 예를 들어, (1) from, 어디서부터, 트랜스포메이션, 변형이 없는 상태에서, from{ transfrom: none; } (2) to, 여기까지, 트랜스포메이션, 변형이 회전 1바퀴, 사..
-
Transformation, 트랜스포메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 3. 02:30
이번시간에는 HTML문서의 element들을 변형시키는 효과, 트랜스포메이션, Transformation을 공부해 보겠습니다. 먼저 박스를 만들고, CSS에서 transform: rotate(20deg)를 작성해 보겠습니다. 브라우저에서 확인하기 전에, 박스가 잘 보이도록 폭 500px, 높이 500px, 배경색은 빨간색으로 설정하겠습니다. 그럼 박스가 20도 회전한 것을 확인할 수 있습니다. rotate, 회전뿐만 아니라, 아래와 같이 다양한 트랜스포메이션, Transformation을 시도해 볼 수 있습니다. 예를 들어, transform: skew(30deg, 20deg); 복사-붙여넣기하여 확인해 볼 수 있습니다 이러한 트랜스포메이션, Transformation은 트랜지션, transition과 ..
-
공부계획 #4 고급형 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 1. 04:20
지금부터 고급형 CSS에 대해 배워도록 하겠습니다.세부적으로 먼저, (1) 트랜지션,transition: hover와 active같은 효과, 즉, 클릭하면 변화가 생기는 효과 (2) 애니메이션, animation: 이미 customized된 애니메이션들을 사용 (3) 트랜스포메이션, transformation: 크기가 커지거나, 회전, 또는 움직이는 효과 (4)미디어쿼리, media query: 브라우저 크기에 맞춰서 움직이는 효과, 즉 웹사이트-모바일 반응형 위의 순서로 알아보도록 하겠습니다.