컴퓨터/CSS 썸네일형 리스트형 CSS position postion의 기본값은 static이다. 1. static 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 2. relative 기존 static 이었을 때의 위치를 기준으로 안쪽 방향으로 top, right, bottom, left 속성에 따라 위치가 이동한다. 3. absolute 조상중에 position: static 속성을 가지고 있지 않은 조상을 기준으로 위치가 이동한다. 즉, relavtive나 absolute나 fixed 속성을 가지고 있는 조상을 기준으로 한다. 만약 조상중에 그런 엘리먼트가 없다면 body엘리먼트가 기준이 된다. 참고로, absolute가 되면 div여도 width: 100%가 아니다. 4. fixed 스크롤에 따라 움직이지 않고 위치가 고정된다. div여도 width: 100.. CSS flexbox CSS flexbox를 이용하면 웹페이지를 이쁘게 꾸밀 수 있다. HTML의 태그와 비슷한 듯 하지만 다르다. flexbox는 결과물은 이쁜데 그 과정이 제대로 알고 보면 쉽지만 제대로 모르고 보면 복잡하고 헷갈린다. 그러니 아래의 내용을 대충 읽지 말고 차근차근 정독하자. 다시 말하지만 쓱 속독해서는 오히려 헷갈릴 것이다. flexbox는 부모 요소인 [flex container]와 다수의 자식 요소인 [flex items]로 구성된다. 자식요소1 자식요소2 자식요소3 결국 [flex container]와 [flex items]에 각각 합당한 속성을 부여해 이쁜 결과를 만드는 것이 flexbox를 활용하는 방법이다. 속성 값 container display, flex-flow(flex-direction.. CSS 기본편 [HTML에 포함시키기] HTML 문서의 head 내에 아래 코드를 추가한다. 위의 코드는 현재 주소 하위의 style 디렉토리를 참조한다. public 하위의 style 디렉토리를 참조하려면 아래 코드를 사용한다. [CSS 저장 디렉토리 생성] ~/app/public$ mkdir style [CSS 파일 생성] ~/app/public/style$ vi mystyle.css [단위] mm, px, %, em [폰트] 사이즈 font-size: 15px; 색상 color: Red; ※ 인풋창과 버튼의 폰트 사이즈를 동일하게 맞춰야 서로 높이가 같아진다. [테두리] border: 1px solid Black; [사이즈] 넓이 width: 100%; 높이 height: 50px; [문단] 문단 정렬 t.. CSS 토글 1. HTML 아이콘 메뉴 2. CSS #toggle #menu { display: none; } #toggle:checked + #menu { display: block; } 3. 주의사항 CSS의 '+' 연산자(?)는 바로 뒤의 엘레먼트에만 적용된다. 그래서 체크박스와 메뉴는 서로 앞뒤로 딱 붙어있어야 한다. 이전 1 2 3 다음