주니어 개발자가 되고 싶은 미짱

display display : 요소의 화면 출력(보여짐) 특성 block 상자 요소 = div 태그 inline 글자 요소 = span 태그 inline-block 글자 + 상자 요소 => 각 요소에 이미 지정되어 있는 값 flex 플렉스 박스 (1차원 레이아웃) grid 그리드 (2차원 레이아웃) none 보여짐 특성 없음 화면에서 사라짐 => 따로 지정해서 사용하는 값 기타 table table-row table-cell TIL display는 각 속성마다 이미 기본값이 지정되어 있다. 느낀점 내가 원하는 레이아웃 만들시 많이 사용하는 속성이라 반가움 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

overflow - overflow : 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성 visible :넘친 내용을 그대로 보여줌 hidden : 넘친 내용을 잘라냄 scroll :넘친 내용을 잘라냄, 스크롤바 생성 x, y축 스크롤 생성 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 넘친 축 방향으로 스크롤 생성 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 overflow-x : x축(가로방향)으로 요소의 크기이상으로 내용이 넘쳤을때 보여짐을 제어하는 속성 overflow-y : y축(세로방향)으로 요소의 크기이상으로 내용이 넘쳤을때 보여짐을 제어하는 속성 TIL overflow: auto; 내용이 흘러넘칠 때 넘친 내용을 잘라내고 넘친 내용을 읽고싶을때 스..

box-sizing box-sizing : 요소의 크기 계산 기준을 지정 content-box : 요소의 내용(content)으로 크기 계산 (기본값) border-box 요소의 내용 + padding + border로 크기 계산 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 TIL key point box-sizing 기본값은 content-box이다 컨텐츠 포함해서 계산하기때문에 일일이 계산 하기보다는 border-box를 이용하기 느낀점 box-sizing 사용은 유용해서 과제시나 프로젝트시 잘 사용할거 같다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

border-radius - border-radius : 요소의 모서리를 둥글게 깎음 0 : 둥글게 없음 단위 : px em vw 단위로 지정 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 각각의 모서리에 정 원를 생성해서 그 원의 반지름이 10px 되도록 배치한다. 배치된 만큼의 둥근 부분을 전부다 삭제해 버리는 것 특정한 모서리만 깎길 원한다면 border-radius : 0 10px 10px 0 (시계방향으로 적용된다) TIL key point border-radius 반지름 기억하자 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

border -border : 요소의 테두리 선을 지정하는 단축 속성 border: border-width(선의 두께), border-style(선의 종류), border-color(선의 색상) 기본값 black - 선의 두께, 종류, 색상을 입력해야지만 테두리 선이 나타난다. - 순서는 따로 지정 되어있지 않지만 가독성을 위해 두께 종류 색상 순으로 하자 (컨벤션) - 두께와 종류 입력시 색상을 따로 지정하지 않아도 색상은 기본 값이 검정색 설정되어 있다 요소의 크기가 커진다. - 요소의 테두리 선을 지정하는 기타 속성들 - border-방향 border-top border-bottom border-left border-right - border-방향-속성 : border-top-width(style/..

padding - padding : 요소의 내부 여백을 지정하는 단축 속성 요소의 크기가 커진다. - init : 0 내부 여백 없음 - 단위 px em vw 등 단위로 지정 - % :부모 요소의 가로 너비에 대한 비율로 지정 단축 속성 padding : top right bottom left (시계방향) padding- top ,padding-right, padding-bottom, padding-left의 개별속성을 합친 게 단축속성이다 띄어쓰기로 구분하며 값의 개수에 따라 값의 적용 위치가 다르다 padding : 0 - 내부 여백 없음 padding 10px -상하좌우 10px 만큼 내부 여백 padding 10px 20px -상하 10px, 좌우 20px 만큼 내부 여백 padding 10px ..

margin margin : 요소의 외부 여백(공간)을 지정하는 단축 속성 음수 사용가능 - init (기본 값): 0 auto: 브라우저가 여백을 => 계산 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용 단위 px em vw 등 단위로 지정 % 부모 요소의 가로 너비에 대한 비율로 지정 (극히 드물게 사용) 단축속성 margin : top right bottom left (시계방향) margin- top , margin-right, margin-bottom, margin-left의 개별속성을 합친 게 단축속성이다 띄어쓰기로 구분하며 값의 개수에 따라 값의 적용 위치가 다르다 margin : 10px -모든 방향으로 외부 여백 10px margin: 10px 20px - 상하 10px 좌우 20px..

css에서 사용할수 있는 여러가지 단위가 있다 px px : 하나의 디바이스가 표현할 수 있는 픽셀(점) 디바이스의 해상도나 화면의 확대 축소에 따라서 다르기때문에 엄연히 따지면 상대 단위이다. ex) 1920 x 1080 가로로는 1920개의 픽셀과 세로로는 1080의 픽셀이 있다는 뜻이다. % % : 상대적 백분율 어떤 것을 기준으로 해서 몇퍼센트의 크기를 가지는지 상대적 단위이다. em em : 요소의 글꼴 크기 하나의 요소가 갖고 있는 단위는 1em 이다. ex) 10px 글꼴 크기라면 1em은 10px이다 rem rem :루트(최상위) 요소(HTML)의 글꼴의 크기 vw vw : 뷰포트 가로 너비의 백분율 vh vh : 뷰포트 세로 너비의 백분율 TIL key point 상황에 맞게 단위를 써야..