프론트엔드 첫걸음

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN The white-space CSS property sets how white space inside an element is handled. developer.mozilla.org 텍스트의 여백 그대로 사용할 때 태그 안에 넣어주면 여백을 그대로 살릴수있는데, 이때 줄바꿈이 필요할때 white-space: pre-wrap (공백 있는 그대로 표시) 또는 white-space: pre-line(공백 1개만 표시) 사용할 수 있다. [참고] https://aboooks.tistory.com/187

See the Pen overflow : hidden by JEONG (@cona) on CodePen. 부모요소와 자식요소의 border 가 겹쳤을때 자식요소의 margin이 작동하지 않는다. -margin collapse 이 때 margin collapse를 피하는 방법은 여러가지가 있다. 대표적으로 부모요소에 padding : 1px; 을 주거나 border: 1px solid black; 을 주는것이다. 그외에도 새로운 블록서식컨텍스트를 생성하는 방법이 있다. BFC가 생기는 조건 html root 태그 (body 태그는 만들어지지 않는다) none을 제외한 float position: fixed, absolute display: inline-block, table, table-cell, tabl..

CSS로 컴파일할 때 외부 선택기로 대체된다는 의미 https://stackoverflow.com/questions/14553066/less-css-hover https://medium.com/the-crazy-coder/what-scss-means-e448e2ac98d3 & 뒤에 공백이 있는 경우. .class1 { & .class2 { ... } } //아래와 같다. .class1 .class2 { ... } &는 .class1 를 요약한 것이다. & 뒤에 공백이 없는 경우 .class1 { &.class2 { ... } } //아래와 같이 컴파일된다. .class1.class2 { ... } 의사 클래스 작성 .button { &:visited { } &:hover { } &:active { } }..

a:link { } /*링크*/ a:visited { } /*방문 시*/ a:hover { } /*지나치게*/ a:active { } /*활동하면*/ a:focus { } /*주목 받습니다*/ ~:hover { } ~:visited { } 순서를 이렇게 해버리면 한번 방문한 사이트는 hover효과가 안먹힌다. [참고] https://velog.io/@cateto/htmlcss-link-visited-hover-active-focus

display를 inline-block으로 준다. https://golmaru.tistory.com/15

a 태그가 width 100%를 차지해버려서 a 하위요소에 준 width 가 무용지물이 될 때 부트스트랩을 사용중이라면 하위요소의 width 관련 속성을 a 태그로 옮겨주고, 부트스트랩을 사용하지 않는다면 a태그를 p태그로 감싸주면 된다. 부트스트랩을 사용 할 때 하위 요소의 너비관련 class를 a 태그에 옮겨준다 안녕 See the Pen Untitled by JEONG (@cona) on CodePen. 부트스트랩 없이 CSS 사용할 때 부트스트랩을 사용하지 않는다면 a 태그를 p 태그로 감싸주면 된다. https://stackoverflow.com/questions/30586988/how-to-make-anchor-tag-fit-to-content-not-entire-width-of-page Se..

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ 1. 부트스트랩 소스 참조시키기 * codepen에서는 bootstrap 사용하려면 https://fe-j.tistory.com/entry/부트스트랩-사용하기 참조 2. 부트스트랩 사이트에 가서 navbar 맘에 드는거 긁어오기 +) 내가 쓰고싶은 navbar list도 긁어옴 3. 상단 고정 하고싶으면 부트스트랩 navbar 에 fixed-top 클래스를 추가하던가, position:fixed 를 추가한다. 4. 리스트나 본문이 navbar에 가려지는 현상은 padding , margin 을 조정하여 해결하였다. 이것도 더 좋은방법이 ..

cdn 으로 시작하기 https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template 여기에 나온 starter template 갖다가 시작하면된다. 부트스트랩 메인화면에 바로 나와있긴 하다. 다운로드 받아서 프로젝트에 파일을 넣어 참조하기 프로젝트 안에 bootstrap 파일을 넣는 것이 (더 안정적이므로) 일반적이다. https://getbootstrap.com/docs/5.1/getting-started/download/ 다운받아서 min.붙은 파일 빼고 다 지워줘도 무방하다고 봄. https://getbootstrap.com/docs/5.0/getting-started/contents/ 요기 들어가면 bundle.js..

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ See the Pen flip by JEONG (@cona) on CodePen. 이미지를 감싸는 div태그 transform-style : preserve-3d; /*3D로 보여줌*/ 이미지 backface-visibility :hidden; /*뒷면(text)을 보여줄때는 앞면이 보이지않도록 함*/ z-index :1 ; /*이미지 앞면을 보여줄때는 뒷면이 보이지않도록 이미지를 z-index 우선순위 줌*/

이미지는 글자랑 비슷한 취급을 받아서 글자의 baseline 위에 이미지가 채워짐 display: block (또는 vertical-align : bottom) 또는 부모요소에 font-size :0 해도 된다. https://stackoverflow.com/questions/7774814/remove-white-space-below-image