본문 바로가기

css3

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 1 회차 미션 HTML CSS JS 개요 웹을 구성하는 HTML, CSS, JS의 이해와 학습은 단지 기술을 배우는 것으로 그치지 웹과 모바일, IT 전반의 과거, 현재, 미래를 이해하는데 도움이 된다. 실무적으로 Product를 보다 구조적 관점에서 볼 수 있는 능력을 키울 수 있다. HTML - HTML은 페이지에 표시되는 제목,문단,표, 이미지 등을 정의하고 구조와 의미를 부여하고 웹의 구조를 만드는 언어이다. 웹 브라우저 위에서 동작하는 언어이다. 온전히 Semantic을 만드는것에 집중해야 한다. HyperText : 문서와문서가 링크로 연결되어있음. Markup : 태그로 이뤄져 있다. Language : 언어 의 의미를 담은 약자이다. CSS - CSS는 HTML, XML 같은 Markup language.. 2020. 9. 7.
CSS 마진(여백) 상쇄 css를 사용하다 보면 이해할 수 없는 현상 때문에 골 머리를 앓는 경우가 많다. 그중 하나가 바로 마진 상쇄 때문이다. margin 상쇄란? 여러 블록의 위아래 margin은 경우에 다라서 큰 margin을 가진 여백으로 상쇄되는 현상인데. floating 요소나 position이 absolute 인 경우에는 상쇄되지 않는다. margin collapsing(마진 상쇄)이 일어나는 이유 1. 인접 형제 요소 간 바깥 여백이 겹칠 때. 1번 BOX 2번 BOX 3번 BOX 위아래 겹치는 margin : 30px의 값이 상쇄됨을 확인할 수 있다. 1번 BOX 2번 BOX 3번 BOX 이번엔 1번 BOX의 margin-bottom값을 60으로 준 상태. 위 이미지에서 확인할 수 있듯. 더 큰 값의 margi.. 2020. 8. 12.
클립보드 모양 CSS HELLO 안녕 Copyrightⓒ2019 by 박지원 | Contact Us 클립보드 모양으로 만들어본..html/css 인데 코드 정리도 제대로 안돼있고 그냥 혼자 쓰는용이라.. 이부분은 어떻게 만들었냐면 clip이라는 클래스의 div에 radius 4px를 주고 border를 4px로 입혀 클립형태로만들어주고 clip1 clip2가 이제 클립의 검정 플라스틱? 부분을 표현해준건데 border의 왼쪽과 하단부분의 solid 를 조금 굵게주고 오른쪽과 상단을 없애고 div 사이즈를 적절한 사이즈로 줘서 나타내 줬다. 2019. 10. 3.