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

div (Division) - : 특별한 의미가 없는 구분을 위한 요소 (block 요소) 어떠한 영역을 나눌 때 사용 문장인가? 뭐지 헷갈릴땐 그냥 div 쓰기 h1 (Heading) - : 제목을 의미 하는 요소(block 요소) 목차 역할 숫자가 커질수록 부제목 숫자가 작을 수록 중요한 제목이다. p (Paragraph) - : 문장을 의미하는 요소 (block 요소) 문장을 묶어주는 요소 ul (Unodrdered List) / li (List Item) - : 순서가 필요없는 목록의 집합을 의미(block 요소) 주관적인 순서일경우 많이 사용 - : 목록 내 각 항목 (block 요소) img (Image) - : 이미지를 삽입하는 요소 (inline 요소) 필수 속성 src: 이미지 소스의 파..

글자와 상자 요소가 화면에 출력되는 특성이며 크게 2가지로 구분 인라인 요소(글자) : 글자를 만들기 위한 요소 블록요소 (상자) : 상자(레이아웃)를 만들기 위한 요소 inline 요소 - :대표적인 인라인 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수평으로 쌓임 줄바꿈 하게 되면 띄어쓰기가 된다 가로 세로 사이즈가 포함한 콘텐츠 크기만큼 자동으로 줄어듦 가로 세로 사이즈를 지정할 수 없다 margin, padding은 위아래 여백 추가 불가, 좌우 가능 인라인 요소 안에는 블록 요소를 사용할 수 없다 (예외가 있긴 함) 인라인 안에 인라인 가능하다 block 요소 - :대표적인 블록 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수직으로 쌓..

- 빈태그 : 위에 태그처럼 종료태그 없이 쓰이는 태그 빈태그 종류 빈태그 쓰임새 이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다. 요소 안에서만 사용할 수 있습니다. 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 요소만 존재할 수 있습니다. 텍스트 안에 줄바꿈(캐리지 리턴)을 생성 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다. 안에서 찾을 수 있습니다. 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다. 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리 문서에 이미지를 넣습니다. 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성 요소는 , , , , 과 같은 다른 메..

내용 : 부모요소 (상위, 조상 요소) - 자식 요소를 감싸고 있는 요소 : 자식 요소 (하위, 후손 요소) - 부모 요소 안에 있는 요소 부모와 자식관계는 상대적인 개념이다 한줄로 쓰면 부모와 자식 관계 찾기 찾기 어렵기 때문에 들여쓰기 하자 - 가독성과 같이 협업하는 개발자를 위해서!! 내용 내용 태그가 바라봤을 때 , : 상위(조상) 요소 태그가 바라봤을 때 , : 하위(후손) 요소 TIL keypoint 부모와 자식 관계는 상대적이다. 느낀점 -코드를 쓸때 나만 생각하는게 아니라 협업하는 사람 혹은 내 코드를 볼사람을 위해 가독성이 중요하다는 걸 알았다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

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 반지름 기억하자 오늘의 학습 만족도 ⭐⭐⭐⭐⭐