HTML, CSS

플렉스박스(Flexbox)란? 플렉스박스는 행/열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식 플렉스박스 방식에서 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호작용을 통해 결정된다. 플렉스 컨테이너 : 레이아웃을 결정할 요소 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소 display: flex; 플렉스방식을 사용하려면 먼저 플렉스 컨테이너를 만든다. 참고로 플렉스박스는 박스레벨 요소이므로 인라인 레벨 요소를 만들고 싶다면 display: inline-flex; 플렉스박스 방식은 주축과 교차축을 제공한다. 방향은 화살표 방향이다. 이 두 축을 동시에 사용할 수는 없다. 그렇기에 1차원 레이아웃 방식인 것임 이 주축과 교차축을 이용해..

margin: 0 auto; 사이트 body 전체를 가운데에 맞추기 대략 가운데 요소들이 이렇게 나온다. 여기서 margin: 0 auto;를 해석해보면 상하 Margin: 0으로 설정하고 좌우 margin: auto, 즉 자동으로 설정하여 사이 간격을 같게 맞추어 가운데로 정렬시키는 것. 부모 block 요소의 width를 기준으로 자동으로 margin을 계산하기 때문에 margin: 0 auto를 했는데도 가운데 정렬이 안된다면 width영역이 어떻게 돼있는지 확인해보면 된다. text-align: center; 텍스트의 가운데 정렬 * text align 태그를 가르키는 선택자 자체가 부모태그여야 하면서 정렬하고 싶은 요소는 Inline이어야 한다. 이는 곧 블록 요소 내의 인라인 요소를 가운데 정..

폰트 꾸미기 폰트에 CSS를 적용하면 내가 원하는 폰트로 만들 수 있다. p{ color : green; } 색상 넣기 원하는 색상을 넣고 싶으면 rgb값으로도 가능하다. 이를 Hex color라고 하는데 RGB값을 각각 16진수로 나타내어 조합한다. #008000

유명한 밈 CSS는 요소가 넘치면 넘치는대로 띄우기 때문에 나온 밈이다. 하지만 브라우저 입장에서 요소가 넘치는 것은 에러가 아니다. 그렇기에 사전에 이를 제어해야 할 필요가 있다. 이를 제어하기 위해서는 overflow 프로퍼티를 사용하면 된다. 이렇게만 쓴다면 그냥 그대로 문구가 넘어가게 되는 것이다. 이때 우리는 프로퍼티 하나를 추가한다. div.overflow{ border: 2px solid black; width: 180px; font-size: 50px; overflow: hidden; } 요렇게 overflow 프로퍼티를 추가하면 border에서 벗어나는 부분을 가려버린다. 그런데 대부분은 이렇게 무조건 가리는게 아니라 안에 스크롤을 부여해 스크롤을 옮기면 보일 수 있도록 만드는 것이다. ..

이미지를 다루는 방법에는 크게 두 가지가 있다. 첫번째는 img라는 이름의 이미지 태그와 두 번째는 특정 block 요소의 배경으로 설정하는 방법. img 태그 사용 이미지 태그는 inline의 성격을 지니고 있으므로 한줄에 표시되려 한다. 얘네들은 스스로 너비와 높이값을 가지고 제어할 수 없기 때문에 레이아웃에서 이미지태그만 단독으로 사용하면 조절이 어렵다. 그러므로 이미지를 단독으로 사용하기보단 div 태그로 마크업 후 관리하는 것이 좋다. src는 이미지의 경로를 가리킨다. 웹에 호스팅된 이미지도 가능하고, 참조할 수 있는 경로의 이미지도 가능하다. alt는 대체 문구를 작성할 수 있어 이미지가 정상적으로 로드되지 않았을 경우 뜰 대체 문구를 설정하는 것이다. 이미지는 원래 크기 그대로 나오기 때문..

CSS에서는 크기변화가 자주 일어나므로 단위가 중요하다. 컴퓨터에 쓰는 단위 중에서 스크린 환경에서 적합한 단위가 따로 있다. px, %, rem/em 등이 있다. px 픽셀(pixel)은 스크린을 구성하는 작은 점을 가리킨다. 얼마나 오밀조밀하게 구성이 되어 있는지와 해상도가 어떻게 설정되있는지에 따라 눈에 보이는게 기기마다 많이 다르다. 하나의 스크린 안에서 픽셀값이 고정이 되면 그 해상도를 가지는 모니터 안에서는 변경되지 않는다. 그렇기 때문에 상대적이면서도 절대적인 성격을 가지고 있다. 다양한 스크린에 적응하기 위해서는 고정된 픽셀값이 아닌 적절한 비율을 선택하여 활용하는게 좋다. % 부모요소를 기준으로 크기를 설정하는 단위이다. 우리는 바깥 부분의 너비를 500px을 정하고 안쪽 요소의 너비를 ..

Box-Sizing은 CSS 규칙 중 하나로, 박스에 적용된 사이즈의 기준을 정하는 속성이다. Box-Sizing에는 두 가지 설정 방법이 있는데, content-Box와 border-Box로 설정할 수 있다. Content-Box는 어떠한 Content의 영역에만 사이즈를 적용하고 요소 전체의 사이즈에 패딩과 테두리 영역을 포함하지 않는다. Border-Box의 경우는 테두리를 기준으로 박스의 사이즈를 결정하기 때문에 content영역이 아니라 border 테두리의 끝과 끝까지의 높이와 너비를 설정할 수 있다. div{ box-sizing: content-box; width: 100px; padding: 5px; } div{ box-sizing: border-box; width: 100px; paddi..

박스 모델은 Inline Box와 Block Box로 구분할 수 있다. Inline Box - 한 줄에 표시 - , , 태그 - 태그로 감싸진 내용만큼만 영역을 차지 - width와 height로 요소의 크기를 조절할 수 없음. 텍스트에 따라 자동 조정됨. 다시말해 레이아웃으로 활동할 수 없음 - inline은 좌우 margin, padding에만 적용 가능. 상하 padding은 레이아웃에 영향 x - 연속으로 사용 시 약간의 띄어쓰기가 있음 - display: inline Block Box - 개별 요소마다 줄을 바꾸고 끝까지 영역을 차지함. - , , 태그 - width와 height로 요소의 크기를 조절 가능 -> 웹 페이지를 설계할 때 width, height, margin, padding을 모..

CSS는 독특한 특성이 있다. 주요 특성으로는 폭포수, 상속, 우선순위가 있다. 폭포수(cascading) 폭포수가 흘러 아래로 떨어지듯 코드가 실행 h1 { color : brown; } h1{ color: red; } 이렇게 같은 태그의 속성을 두번 선언하면 코드가 아래에 있는 속성이 적용되고 나머지는 무시된다. 상속(Inheritance) 부모 요소의 CSS 규칙을 자식 요소가 상속하여 적용 다만 자식요소가 CSS규칙을 가지고 있다면 이를 우선하여 적용한다. div 태그 내의 요소들을 모두 갈색으로 만들고, 여기서 또 p 태그의 클래스가 abc인 태그를 찾아 이 텍스트만 빨간색으로 만들었다 여기서 p태그는 부모요소의 CSS규칙을 받아야 하는 자식요소지만 따로 CSS규칙을 가지고 있기 때문에 빨간색만..

HTML의 기본 구조 자체를 Boiler plate라 하며, 기본적으로 계속 재사용되는 코드를 의미한다. 태그별로 설명 html 문서임을 선언하는 부분 html 내용이 어떤 언어로 사용되어 작성했는지 명시하는 부분 vscode같은 곳에선 en으로 뜨는데, 내 웹페이지가 한국어라면 ko로 바꿔놓는게 좋음 head 태그 웹문서의 속성, 인코딩 방식, 외부 리소스를 로드하는 설정과 같은 성격을 띄는 것들을 명시하는 항목 meta 태그의 경우 attribute에 따라 의미가 달라짐 charset - 인코딩, 이 문자를 어떤 식으로 해석할 지 알려줌. UTF-8은 전세계 언어 문자를 모두 지원하는 인코딩 방식. 특정 언어가 깨지는 현상 방지 브라우저 호환성을 설정하는 태그 버전별로 같은 문서로 다른 방식으로 해석..