뇨내

페이지 제작을 하다가 분명 컨테이너 넓이를 지정했음에도 계속 X축 스크롤이 생겼다. 코드를 하나하나 다 뜯었는데도 사라지지 않는 스크롤... 살짝 애를 먹다가 생각보다 쉽게 해결했다. body { overflow-x: hidden; overflow-y: auto } 이 한 줄로 끝난 내 1시간 이런 방법도 있다고한다. (근데 저는 안됐음ㅎㅎ..) body { box-sizing:border-box; }

전후 선택자 1. :before 2. :after 전후 선택자에서 사용하는 css 구성 요소 - content 속성의 값 1. none 2. 문자열 3. attr(속성) 4. open-quote 5. close-quote *CSS는 축약해서 표현하는 기능이 있다. * 앞에 접두어 하나만 갖고 동시적용하도록 지원하도록 하는 기능도 있다. 그러나 풀네임으로 적는 것을 권장(가독성)

버튼에 색상등 조작을 하게 되면 클릭시 딸깍 하고 눌리는 효과가 사라집니다. active하나만 추가해 주면 해결이 됩니다. See the Pen Untitled by helloppiok (@helloppiok) on CodePen.

전체 body 속성이랑은 다른 것을 건들여야 해서 자주 헷갈려서 기억하라고 이미지로 남김 저 상자 글씨크기가 이상하게 아직 맘에 쏙드는 크기가 없는데 저 상자속 크기를 바꾸려면 172라인의 font-size 변경

VSCode 기본 설치 상태에서 tab 키를 눌렀을때 var a = "tab키 안됨 "; 이런 상황 많이 겪으셨을겁니다. 이클립스 등에서는 tab키를 누르면 자동으로 문장 끝으로 넘어가는데 VSCode는 그냥 들여쓰기가 되는 상황입니다. 자주 굉장히 귀찮음 오타나서 각설하고 해결법은 'TabOut'을 설치하면 됩니다!! 왼쪽상단을 보면 빨간색 네모로 표시한 부분이 있는데 확장팩을 설치할 수 있습니다. 클릭해줍니다. 그 후 검색창에 TabOut 검색 후 설치 -> 사용하면 끝 이제 편하게 tab키로 코드 작성을 할 수 있습니다. var a = "tab키 이제 됨";

Font 폰트 @font-face { font-family : ; src: url( ); } font-family: ; - 서버상의 폰트를 클라이언트에게 실시간 제공 - 클라이언트 pc에 폰트가 설치되지 않는다. 참고용 폰트 사이트 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 눈누 - 상업용 무료한글폰트 사이트 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc

Shadow 그림자 1. text-shadow: x y blur color 2. box-shadow: npx npx npx color 블럭태그, 인라인태그 그림자 효과 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Document .box { border: 1px solid black; width: 200px; height: 100px; margin: 20px; } /* 개체간의 중첩된 margin은 합이 아니라, 큰 마진이 적용된다. */ /* #box1 { margin-bottom: 10px; } #box2 { margin-top: 20px; } */ 상자1 상자2 상자3 안녕하세요. 삐옥이입니다...

Alignment 정렬 정렬, Alignment - 인라인 태그와 블럭 태그의 수평 정렬 1. 인라인 태그 - 내용물 정렬 불가능 왜? 여백이 없다. 2. 블럭 태그 - 내용물 정렬 가능 왜? 여백이 있다. 태그 자체 정렬 1. 인라인 태그 자체를 정렬하려면 - 블럭 태그인 부모를 가져야 한다. > 즉, 부모에게 text-align을 사용한다. 2. 블럭 태그 - 불가능 > 좌우 공간이 없다. > 너비 100% - 가능하게 하려면 좌우 margin이용 일반적인 정렬 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Document #s1 { background-color: yellow; text..

Position 1. padding 2. margin 3. position 4. trasform > CSS3 position: static | absolute | relative | fixed ; position : 요소의 위치를 지정하는 속성 - 좌표값 사용 - x(left), y(top) - 좌표를 지정하는 방식이 여러개 제공(좌표계 > 기준점) 1. position: static - 정적 좌표 - 기본값 - FlowLayout 방식 - 워드 프로세스 방식 - 코딩 순서대로 출력되는 방식 위 -> 아래, 왼쪽 -> 오른쪽 - 좌표값 지원 안됨(left, top 사용 불가능) 2. position: absolute - 절대 좌표 - 기준점: 문서의 좌측 상단 - 모든 태그가 동일하게 문서의 좌측 상단을..

float float: left | right ; - float이란 이름의 속성이 있다. - 기존의 출력정책을 깨고, 혼자 자신의 위치에서 벗어나서 현재라인의 좌측(우측) 끝으로 이동한다. - 이미지, 텍스트 > 인라인 태그 > 같은 라인에 출력된다. - 이미지와 텍스트의 높이가 서로 다르다. -> 그래서 여백이 생기게됨 -> 메꿔야함 float 이용! - align은 이미지를 정렬하려고 만든속성이 아니다.(HTML) - 서식이라서 CSS이용해야함 추가적인 밑줄이 필요할때 로 이용해도 되나 border-bottom 을 이용해서 px단위로 만들 수 있다. 1 2 3 4 5 6 7 8 #title { /* text-decoration: underline dashed red 2px; */ border-bott..