양씨

position이란? 이름 그대로 태그들의 위치를 결정하는 속성이다 position을 이용하면 텍스트나 이미지들을 원하는 위치로 배치할 수 있다 포지션 속성 사용법은 다음과 같다 //css position: static | relative | absolute | fixed | sticky 5가지 방법이 있다고 생각하면 된다 그냥 간단하게 뭐를 기준으로 top, bottom, left 등으로 움직일꺼? 냐고 물어봤을 때 그 기준이 방법 이라고 생각하면 된다 position 속성 설명 position : static; //기준이 없다~ 좌표적용 안됨 position : relative; //기준이 내 원래 위치다 == 기준이 body이다 position : absolute; // 기준이 내 부모인데 부모에 ..

margin collapse란? "마진이 겹쳤다"라고 말하는 현상이다 즉, 박스의 테두리들이 완전히 겹쳐 있으면 다음과 같은 상황이 나타난다 마진을 하나로 합쳐주고 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용하게 된다 이건 어떻게 해결할까? 안겹치게 하면 된다 그냥 간단히 부모 박스 상단에 padding:1px와 같이 패딩값을 주자

div로 레이아웃을 짜며 왼쪽 정렬을 하고 싶을 때 float:left를 이용하여도 되지만 display : inline-block을 이용하여도 된다 인라인블록 인라인블록 : 내 폭과 높이만큼 자리 차지하게 해줘 기존 inline 요소와 마찬가지로 나란히 배치되지만 block 요소 처럼 width와 height 등 속성 지정이 가능하다 즉, block 요소를 따르면서 외부적으로는 inline요소가 되는 하이브리드 타입이다 그래서 레이아웃을 만들 때 사용되는 경우가 있긴하다 .left-box { width : 100px; height : 100px; display : inline-block; } .right-box { width : 100px; height : 100px; display : inline-b..

div를 이용하여 레이아웃을 만들때, 왼쪽으로 정렬하고 싶은 경우가 있다 이때 float 속성을 사용하면 된다 Float 요소를 공중에 띄워 왼쪽/오른쪽으로 정렬하는 속성이다 .left-box { width : 100px; height : 100px; float : left; } .right-box { width : 100px; height : 100px; float : left; } 하지만 float는 말 그래도 요소들을 띄우기 때문에 다음 html 요소들이 제 자리를 찾지 못한다는 단점이 있다 + float박스로 가로정렬할 때는 div로 감싸고 폭을 지정해줘야 모바일에서 안흘러넘친다 그래서 float를 사용한 뒤 clear 속성을 사용해서 다음에 오는 박스들이 제자리를 찾게 된다 + float : n..

css selector란? 말 그대로 선택을 해주는 요소이다 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다 selector 종류는 크게 4가지이다 전체, 태그, 클래스, 아이디 .profile { font-size : 20px } //클래스 #special { font-size : 30px } //아이디 p { font-size : 16px } //태그 * { font-size : 20px } //전체 위와 같이 css파일에 적용 가능하고 해당 요소에만 스타일이 적용가능하다 굳이 하나만 선택하지 않고 복합적으로 선택도 가능하다 //하위 선택자 section ul { font-size:20px; } //자식 선택자 section>ul { font-size:20px; } 하위 선택자 : 부..

css란? cascading style sheets 약자로 html 등의 문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어 글자 텍스트 등 인라인 요소 중앙 정렬 text-align: center 이용 p { text-align: center; } 블록 요소 중앙 정렬 1) margin: 0 auto 이용 div { margin: 0 auto; } auto는 자동적으로 사이즈를 적용하는 것이기 때문에 가로의 넓이가 있어야한다(지정되있지 않다면) 인라인 속성이 아닐때는 display: block 2) flexbox 이용 부모요소에 다음과 같이 flex 설정을 해준다 .container{ display: flex; justify-content: center; }