용로그

이번 크리스마스🎄는 flex 개념과 함께합니다😎 프로젝트 전에 한 번 정리를 하면 좋을 것 같아서 예시 사진까지 다 만들어서 정리해 봤습니다.    flex속성은 기본적으로 안에 있는 모든 요소를 행(row) 방향으로 나열하고, 행의 왼쪽부터 요소를 배치한다.  flex 규칙 주축과 교차축레이아웃은 기본적으로 행(row) 형태이기에 자식 요소들이 가로로 정렬됩니다. 이것을 주축이라고 합니다.  display 속성을 flex로 지정하면 주축은 자동으로 수평축이 됩니다. 교차축은 주축과 수직을 이루는 축으로, 즉 주축이 행 방향 정렬이라면 교차축은 열 방향 정렬을 의미합니다.   flex container 속성 flex-directiondisplay: flex를 적용하면 flex-direction 속성의..

[상단 태그] DOCTYPE - 문서가 최신 형식인 HTML5로 작성됐다는 것을 의미함 - 선언하지 않을 경우 옛날 브라우저를 모방하여 HTML 문서를 읽는다. - 기계가 읽을 정보인 메타데이터가 담기는 곳이다 (페이지의 제목, 파비콘(아이콘), 기타 메타정보, CSS,JS의 코드 및 링크) - 브라우저의 탭에 표시 - 브라우저 즐겨찾기의 제목으로 표시 - 검색엔진 검색결과의 제목으로 표시 [meta 태그와 속성들] - 페이지가 어떤 문서로 작성되었는지를 명시한다. - UTF-8이란 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식이다. - 문서 저장형식도 UTF-8로 맞춘다. - html 태그의 lang 속성은 검색 엔진에서 이 사이트가 어떤 언어로 되어있는지를 알려주는 것이고, charset은..

flex는 요소를 포함하는 부모에게 적용하는 속성과 자식에게 적용하는 속성으로 나뉜다.    [flex 컨테이너 부모에게 적용되는 속성] display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됨  flex-direction에 따라 안에 있는 내용들의 정렬하는 축이 달라진다.  - flex-direction : row   세로 정렬(왼쪽에서 오른쪽으로)- flex-direction : column   가로 정렬 (위에서 아래로)- flex-direction : row-reverse  세로 정렬(오른쪽에서 왼쪽으로)- flex-direction : column   가로 정렬(아래에서 위로) 위의 값에 따라 justify-content, align-items, align-content등의..

border 속성은 요소에 테두리를 줄 수 있다.굵기, 스타일, 색을 지정할 수 있다.ex) border : 2px solid black; box-sizing 속성은 너비와 높이 값에 padding과 border값을 포함시킬지 결정 - box-sizing이 content-box일 때는, 너비와 높이에 padding과 border를 제외시키고, 안쪽의 텍스트 박스부분만 적용- box-sizing이 border-box일때는 너비와 높이에 padding과 border값을 포함시킴 border-radius 속성은 모서리를 둥글게 함      overflow 속성은 부모 요소보다 높이나 너비값이 큰 자식요소를 나타내는방법을 지정할 수 있다. overflow에 x,y축을 함께 주거나, overflow-x, over..

inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다.  단위% : 부모 길이에 상대적 vw,vh : 뷰포트(화면 창의 크기) 너비와 높이의 1/100 단위ex) width가 50vw면 윈도우 창의 반을 차지함%는 부모 요소에 한정, vw,vh는 화면(윈도우)창 전체 기준 vamx,vmin : vw,vh 중 큰 것과 작은 것의 1/100 단위가로,세로 중 더 긴게 vmax, 더 짧은 게 vmin 텍스트가 한 줄일 경우 height와 line-height를 똑같이 맞춰주면글자가 위아래로 가운데 위치하게 효과를 줄 수 있음  display : none; 을 사용하면 화면에서 사라지게 한다.    [margin, padding] margin : 바깥 쪽 여백padding : 안쪽 여백 ..

인라인 스타일 : HTML 태그마다 style 속성으로 css 코드를 넣어주는 방식. 여러 요소들에 공통 속성을 재사용하여 부여할 수 없으며, 분리가 불가능하기에 특별한 경우 제외하고는 사용하지 않음 내부 스타일시트 : head 태그 안에 style 태그를 두고 그 안에 css 코드를 작성하는 방식. css가 해당 html 문서에서만 적용될 경우 유용하게 사용될 수 있다. 링킹 스타일 시트 : 외부 css파일을 html 문서에 연결하는 것. css코드를 여러 html 파일에서 공통으로 사용할 수 있으므로, 가장 널리 사용되는 방식임    CSS의 선택자가 구체적일수록 우선순위가 높다 - css로 html을 꾸미려면 어떤 것을 꾸미겠다는 지정이 필요하다. - 같은 선택자의 경우 뒤에 오는 것이 우선 순위가..