우당탕탕 코딩생활

안녕하세요! 오늘도 한 번 달려보겠습니다. 지난 시간에 알아본 것은 flex였는데요. 🤔 Grid 공부를 시작하면서 한 가지 알아두어야 할 점이 있습니다. 바로 둘의 차이점인데요. flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로세로) 레이아웃 시스템이라는 것입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능하다는 거 짚고 넘어가겠습니다! 😊😊 grid layout flex와 마찬가지로 컨테이너와 아이템만 있으면 구조를 짤 수 있습니다. 역시, 부모 요소인 것을 grid container라고 부르고 자식 요소를 grid item이라 칭합니다. .container { display: grid; } 용어 정리 그리드 컨테이너 (Grid Container) display: grid를..

안녕하세요! 🥰🥰🥰 지난 시간에는 float을 알아봤는데 오늘은 또다른 방법, flex에 대해서 알아보려고 합니다. flex는 flexible box, flexboc라고 부르기도 하며, 레이아웃 배치 전용 기능으로 고안된 친구이기 때문에 float 등을 이용한 기존 방식보다 훨씬 편리하기 때문에 알아두시는 것이 좋습니다! 바로 시작하겠습니다! flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 방법입니다. 레이아웃을 작업할 때 아주 유용하므로 꼭 알아두시는 게 좋습니다. //부모 요소인 main을 flex container라고 부르고 //자식 요소인 contents들을 flex item이라..

float 요소에 대해서 말하기 전에 block 요소에 대해서 다시 한 번 짚어볼건데요. block요소의 가장 중요한 포인트! 바로 세로 나열이었는데요. 이런 세로 나열을 가로로 바꿀 수 있는 친구가 바로 float이라는 친구입니다. float은 레이아웃을 완성하기 위한 필수적인 속성이므로 꼭 알아두어야하구요. float지정하는 법과 함께 해제하는 방법도 오늘 알아보도록 하겠습니다. float 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변에 존재하게 하는 속성 이런 속성을 가진 친구여서 세로로만 나열되던 block들을 가로로 서로 어울리게 배치하려고 할 때 유용합니다. 그렇게 때문에 레이아웃에서 필수적입니다. 글로만 보니 어려우시죠. 그림으로 한 번 보겠습니다. 이런 모양의 레이아웃을 만들고 싶다고..

🥲초보는 오늘도 공부합니다. 코딩과 웹 공부를 시작한지 얼마되지도 않았는데 벌써부터 절망을 느끼고 있어요. 하지만 꾸준하게 하다보면 언젠가 저도 괜찮아지겠지, 그렇게 생각하며 블로그에 글을 씁니다! 오늘은 HTML중에서 SECTION이라는 요소를 알아보려고 하는데요. HTML5에 새롭게 추가된 요소로서, 섹션을 표시합니다. 예시를 보면, 제목 본문 여기서 섹션이라는 요소의 용도 '내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도' 입니다. 쉽게 말해 같은 성격의 내용, 즉 관련있는 내용을 section에 묶어서 표시하는 겁니다. 이렇게 section을 사용하게 되면 장점이 뭐가 있을까요? 광고나 뉴스 섹션처럼 서로 다른 성격을 가진 것들을 이 섹션요소로 표현해주면 영역 구분이 아주 명확하구요. 문서 ..

★시멘틱 마크업 (Semantic markup) 시멘틱의 사전적인 뜻은 '의미론적인'정도로 해석할 수 있는데 이는 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 쉽게 말해 '의미론적인 HTML 태그 작성' 으로 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것입니다. * 마크업 (Mark up) : HTML 태그로 문서를 작성하는 것 시멘틱 마크업의 작성 방법 의미를 잘 전달하기 위해서는 각 태그를 그 용도에 맞게 사용해야 합니다. 즉, 코딩을 할 때 의미가 없는 요소를 사용하기 보다는 아래와 같이 용도에 맞는 태그를 사용하여 작성하는 것입니다. 헤더에 사용 메인 컨텐츠에 과 사용 좌측과 우측 사이드 위치 공간으로 참고가 될 수 있는 컨텐츠에 사용 페이지 사이트, 애플리케이션..

블록 레벨 요소 (Block-leverl Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 쉽게 말하면 '가로 정렬'이 되지 않는다는 뜻으로, 항상 새 줄에서 시작하며 전체 너비를 박스 형식으로 사용하게 되는 구조입니다. 인라인 요소 (Inline Element) 인라인 요소는 블록 요소와 달리 마크업을 할 때 가로로 정렬이 됩니다. 즉, 줄 바꿈의 특성이 없다는 뜻으로 행이 바뀌지 않고 한 줄로 출력이 됩니다. 자주 쓰이는 요소들을 정리해 보겠습니다. 요소 속성 변경 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 속성을 변경 할 수 있습니다. {display:inline;} / {display:block;} 을 사용해봅시다. {display:inline;..