profile
콘텐츠 마케터에서 프론트엔드 개발자로...

CSS flexbox

css에서 강력한 정렬기능을 제공하기 위해 고안되었다. 두 개의 축에 대해 명확히 이해해야 정확히 다룰 수 있다. nowrap : 부모 박스 사이즈에 맞춰서 강제로 자식 요소 사이즈를 줄여서라도 무조건 한줄로 정렬됨.: flex-direction 으로 지정된 메인 축

2020년 10월 25일
·
0개의 댓글

CSS Box

📦 CSS Box Model ✏️ content : 콘텐츠가 있는 상자 (width/height) ✏️ padding : 안쪽 여백 ✏️ border : 테두리 >🔎 특징 굵기, 스타일, 색상 지정 필수 (ex:px, solid, blue) border-ra

2020년 10월 24일
·
0개의 댓글
post-thumbnail

CSS Position

문서 상에서 요소를 배치하는 방법을 지정한다. top, bottom, left, right가 최종적으로 위치를 지정한다. 위치 지정시 top, bottom 둘중 1개, left, right 둘중 1개만 사용하는 걸 추천한다.z-index : 수직방향 (정수로 위치 지정

2020년 10월 19일
·
0개의 댓글
post-thumbnail

CSS float

특정 요소를 기존 문서 흐름에서 벗어나 '붕~뜨게' 만든다.'붕~뜬다', '부유하다'라는 의미는 부모 요소 박스에서 float가 된 자식 요소가 부모 박스가 인식하지 못하는 요소가 되어 '집나간 자식'이 된다. 주변 형제 요소도 해당 float된 요소를 인식하지 못한다

2020년 10월 19일
·
0개의 댓글
post-thumbnail

CSS selector

Type(요소) : HTML 태그 직접 지정class : class 선택 (.)ID : ID 선택 (자식 선택자 (>)자손 선택자 (공백)형제 선택자 (+,~):first-child : ~의 첫번째 요소:last-child : ~의 마지막 요소:nth-child(n)

2020년 10월 18일
·
0개의 댓글
post-thumbnail

CSS 기초

css meme 하면 가장 흔히 나오는 짤이다.유튜브를 슬쩍보고 수박 겉핥기로 css를 잠시 배우고 클론코딩으로 유튜브 일부 화면을 만들어 보고나서 나도 저 짤이 너무나 공감이 됬다. 왜들 css가 어렵다고 하는지 절실히 느꼈다. 그래서 다시 제대로 배우고, 제대로 이

2020년 10월 18일
·
0개의 댓글