div { width:15%; /* 부모 엘리먼트 너비 기준 */ height:100px; background-color:red; display:inline-block; } div:first-child { /*첫번째 자식*/ background-color:blue; } div:nth-child(2) { /*n(2)번째 자식*/ background-color:gold; } div:last-child { /*마지막 자식*/ background-color:green; } div:nth-last-child(2) { /*마지막에서 n(2)번째 자식*/ background-color:pink; } codepen.io/jangka44/pen/xJEeag section { text-align:center; } sect..

이미지는 기본적으로 비율을 갖고 있다. 따라서 높이(또는 넓이)만 설정해줘도 비율에 따라 자동으로 넓이(또는 높이)가 같이 바뀐다.(물론 각각 설정도 가능은 하다.) 이미지는 자신의 부모의 설정 크기에 영향을 받지 않는다!! But, 부모의 설정 크기에 영향을 받게하고 싶다면 이미지에 width:50%와 같이 비율을 설정해주면, 부모의 설정값 대비 50%의 비율로 이미지 크기도 자동으로 변경된다. codepen.io/cjy324/pen/poEzZbr?editors=1100

margin : 테두리 밖 여백 padding : 테두리 안 여백 bnx.oa.gg div{ font-size:2rem; font-weight:bold; } section{ text-align:center; } img{ width:220px; margin:10px; padding:10px; background-color:green; } codepen.io/cjy324/pen/XWjrYwV?editors=1100

HTML BNX | BRAND | VISUAL | STYLE | MEDIA | NEWS | STORE | CUSTOMER | CSS div{ text-align:center; font-size:5rem; font-weight:bold; letter-spacing:-10px; } div > a{ text-decoration:none; color:black; } section { text-align:center; font-size:1rem; font-weight:bold; } section > nav{ display:inline-block; text-align:center; width:120px; } section > nav > a{ text-decoration:none; color:black; } sect..

hover -사전적의미: 공중을 맴돌다, 방황하다 -(클릭은 하지 않고) 마우스 커서를 올려둔 상태 codepen.io/cjy324/pen/xxOvyvQ

네이버로 이동 속성명: href, target 속성값: "https://www.naver.com", "_blank" codepen.io/cjy324/pen/BazXqog

줄바꿈, 셀프클로즈 태그 => 을 사용하지 않는다 띄어쓰기

div { /* 글자의 두께 조절 */ //아래값이 최종값으로 입력됨 font-weight:normal; font-weight:bold; /* 기본폰트의 3배(rem) */ font-size:3rem; font-size:140px; /* 자간조절 */ letter-spacing:5px; /* 색조절 */ color:#7878ff; ff 가장 밝은값 ~~~ 00 가장 어두운 값 color:rgba(255,0,255,0.5); 255 가장 밝은값 ~~~~~ 0 가장 어두운 값 // 마지막값은 0~1 사이 투명도 조절 } codepen.io/cjy324/pen/pobMjGq

codepen.io/cjy324/pen/rNLXxaN

display 속성 정리 종류 inline-block(=inline) block none 너비 최소한으로 줄어든다. 최대한으로 넓어진다. 없어진다. 본질 글자화 블록화 - line 사용 한 줄에 최대한 여러개가 나온다. 한 줄을 무조건 혼자 쓴다. - 정렬 부모의 text-align에 의해서 정렬 스스로 margin-left, margin-right를 사용해서 정렬 - 예외 a, img, span 엘리먼트는 기본적으로 display가 inline 이다. inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다. disply : block -너비 : 지정되지 않은 경우 자동으로 최대한 유연하게 늘어난다 -높이: 지정되어 있지 않은 경우 최소한으로 유연하게 줄..