삐제제의 개발 노트

1. 반응형 웹 사이트 - 다양한 기기에 반응하는 웹사이트 - 사용자 접속 기기/환경에 맞춰 화면의 크기가 자동으로 조절 => 최적화된 화면 레이아웃을 보여주는 사이트 반응형 웹 사이트의 장점과 단점 장점 - 기기의 화면 크기나 해상도에 구애받지 않음 - 화면의 변화에 즉시 반응 - 어느 기기에서든 사이트 주소가 같다. - 유지 관리가 편하다 - 최신 웹 표준을 따른다. 단점 - 예전 브라우저 버전과 호환성에 문제가 있을 수 있다. - 사이트 디자인이 단순하다. 반응형 웹을 구현하는 여러 가지 방법 미디어 쿼리 - 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술 - 각 기기마다 서로 다른 레이아웃을 표시할 수 있음 - 미디어 쿼리는 CSS3 표준 규약에 포함된 기능 CSS 프레임..

부모박스에 opacity가 적용되어있으면, 그 자식도 영향을 받게된다. 예를들어 박스가 하나있고, 그 박스안에 3개의 박스를 배치하고싶은데 바깥 박스는 투명하게, 안쪽박스는 투명하지 않게 하고싶다. 그런데 이때 부모박스의 css 속성에 opacity값을 주게되면.. 안쪽박스까지 같은 투명도를 가지게된다. 이때 위에 보이는 아이콘들의 css속성에 opacity: 1; 값을 주어도 위와같은 상태가 그대로 유지된다.. 하지만 이때 부모의 css에 opacity 대신 background-color: rgba(0, 0, 0, 0.5); 이처럼 rgba 로 투명도를 주게되면 원하는대로 나온다.

HTML에서 padding을 주게되면 박스가 커진다. 이게 무슨소리냐면.. 다음과 같이 width 와 heigth가 300px인 박스가 있다. 이제 여기서 패딩을 30px 만큼 주게된다면 위와같은 모양으로 변하게된다. 여기서 살펴보면.. width:300px height:300px 의 크기는 그대로 유지한 채 박스가 커진다는걸 관찰 할 수 있다. 즉 우리가 내용을 작성할 공간은 변함이 없다는 것이다. 하지면 여기서 Hi 위의 코드처럼 box-sizing: border-box; 라는 css 속성을 주게되면? padding 이 들어간 모습은 잘 관찰할 수 있다. 하지만? 박스의 크기가 그냥 padding을 줬을 때보다 작아진 느낌이 든다! width:300px / height:300px 의 공간 내부에 pa..

not() 은css에서 뭔가가 적용되는것을 원치 않을때 사용합니다. 예를들어서 p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 위와 같은 CSS & HTML 코드가 있다면 p:not(.classy) {color: red; } 이므로 "classy" 라는 클래스가 아닌 p 태그의 색상은 빨간색으로 나오게 될것입니다. body : not(p) { color: green; } 에서는 body 태그에서 p 태그가 아닌 곳에서의 컬러는 green을 가지게 될 것입니다. 따라서 다음과 같은 출력 결과를 볼 수 있습니다. Some text. Some other text. One m..

developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries 미디어 쿼리 사용하기 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org developer.mozilla.org/ko/docs/Web/CSS/@media @media @media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. developer.mozilla.org 이것도 내가 보려고 저장 ㅎ

animista.net/ Animista Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use. animista.net 애니메이션 효과들을 미리보기 할 수 있고, 코드도 가져올 수 있는 사이트!

matthewlein.com/tools/ceaser Ceaser - CSS Easing Animation Tool - Matthew Lein Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them matthewlein.com transition과 관련한 속성들을 사용할때 차이점을 보기에 유용한 사이트! 저장! devel..

developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 의사 클래스 CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org 내가 필요할 때 보려고 저장 ㅎㅎㅎ

안녕하세요. 오늘은 저번 글에서 설명했던 position 속성의 fixed에 이어서 relative, absolute에 대해서도 기록해보려고 합니다. position : relative 속성은 엘리먼트의 위치를 약간씩 조절할때 유용한 속성입니다. 하나의 박스를 만들고 그 안에 작은 파란색 박스를 만들었습니다. 문서에는 이렇게 표시된 상태입니다. 이 상태에서 안에있는 작은blue박스의 위치를 조금 움직이고 싶습니다. 이럴때 position : relative를 이용할 수 있습니다. position : relative를 해주게되면, top, bottom, left, right 속성값도 조절할 수 있습니다. 이 값을 이용하여 저희는 작은 blue박스의 위치를 조절하게 되는 겁니다. 아래와 같은 사진처럼 됩니다..

HTML문서에서 쓰이는 CSS 속성중 position 이라는 속성이 있습니다. 이 position 속성에서 자주 쓰이는 속성들은 대표적으로 fixed, relative, absolute 가 있습니다. static 속성이있는데 이것은 디폴트 값이라고 생각하시면 됩니다. 아 그리고 body 태그는 기본값으로 position : relative 값을 가지고 있습니다. 이번 포스트 에서는 fixed 에 대하여 먼저 포스팅 하려고 합니다. fixed는 position : fixed 값을 가지고있는 엘리먼트를 웹에 고정시킵니다. 그리고 이 속성값을 줌으로써 top, left, right, bottom 속성을 이용할 수 있습니다. 우선, 사진으로 봅니다. 아래는 코드입니다. fixed 태그는 적용된 위치부터 고정되어..