imgyuzzzang

자꾸 헷갈리는 자식 선택자 first-child 는 자식한테 거는거임… ul 안의 첫번째 li 선택하려면 ul li:first-child attribute selector 특정 attribute을 가지고 있는 element data-mkt-id를 가지고 있는 button 이라면 button[data-mkt-id] “example”을 포함하는 href를 가진 a 태그라면 a[href*="example"] ~ 으로 끝나는 것 : $="~" ~ 문자열을 한 번 이상 포함하는 것 : *="~" ~ 포함하는 것(클래스처럼 공백으로 구분되는 attribute) : ~="~" general sibling combinator 특정 선택자 뒤에 나오는 선택자 고르기! img ~ p 선택자로 하면 3, 5번째줄 p가 선택..

자주 헷갈리는 배치(container, grid, width, height, margin, padding) 정리 container container: 너비 고정 (양 옆 여백 존재), 화면 크기에 따라 max-width 바뀜. container-fluid: width는 항상 100% 고정 (여백 x) grid col-(sm/md/lg/xl)-(offset)-(1~12) 한 row의 전체 넓이는 12로 둠. sm : 576px 이상의 스크린 (모바일) md : 768px 이상의 스크린 (태블릿) lg : 992px 이상의 스크린 (작은 데스크탑) xl : 1200px 이상의 스크린 (큰 데스크탑) offset: 좌측에 offset-숫자 만큼의 여백(margin) width & height w-(%): wi..

한번 날려먹고 다시 쓰는 규짱의 첫 포스팅....^~^ 웹프로그래밍 독학의 목표는 올해 안에 성공적으로 외주 받는 것으로 정하겠다 !! 두근 초딩들 웹 가르쳐주다가 문법은 지난주로 진도를 마쳤고, 이제 실습을 해야하기 때문에 내가 직접 만들어보려 했으나, (물론 목표는 5월 안에 만족스러운 웹페이지 뚝딱 만들기.....) 초반부터 그냥 막혀버림ㅎㅎ 레이아웃이 너무 까다롭다.. 이후 포스팅에서는 position도 따로 다루어야겠다. 게다가 div 배치할 때 float를 사용하였는데, 이는 꽤나 구식이라는 조언을 들어서 전에 잠시 공부한 기억이 남아있는 flex-box를 다시 정리해보겠다. Flex-container / Flex-item 사용 방법에 앞서 flexible box에서는 요소들을 배치하기 위해 ..