728x90 반응형 HTML38 CSS - display(3) grid와 item CSS - display(3) grid와 item 오늘은 저번 시간에 다뤘던 display에서 grid에서 item과 관련된 속성에 대해 알아보겠습니다. 저번 시간 내용을 정리해 보면 grid는 엑셀과 비슷하게 구성되어 있으며 행과 열을 지정해서 원하는 위치에 배치하는 형태로 디자인을 합니다. grid는 겉에 container와 안에 item들로 구성되어 있습니다. container와 관련된 속성으로 행과 열, 행과 열 간의 사이 값과 같은 박스를 만들어주고 item과 관련된 속성으로 원하는 위치에 태그라는 아이템을 배치해서 디자인할 수 있다는 것을 설명드렸습니다. 저번 시간에는 grid에 관련한 내용과 conainer와 관련된 기본적인 속성에 대해 알아보았었는데요. 오늘은 그중 item과 관련된 기본적.. 2022. 7. 22. CSS - display(2) grid와 container CSS - display(2) grid와 container 오늘은 저번 시간에 다뤘던 display에서 grid에 대해 먼저 알아보겠습니다. grid는 간단하게 엑셀과 비슷하다고 생각하셔도 좋을 것 같습니다. 이유는 특정한 영역 안에서 엑셀처럼 표와 같은 형태로 구성이 되어있기 때문입니다. 부모 태그에 grid를 지정해주면 안에 자식 태그들은 부모 태그 안에 표와 같은 형태로 배치가 됩니다. 그래서 grid를 지정해주면 표를 구성하는 것처럼 행과 열의 수를 지정해야 하며 행과 열을 지정해주면 자식 요소를 어떤 행에 배치할지 어떤 열에 배치할지 지정해야 합니다. 그럼 왜 grid를 사용하는지 설명드리면 저번 시간에도 말씀드렸듯이 웹을 디자인하면서 HTML 태그들이 내가 구성했던 위치로 정확하게 배치해야 하.. 2022. 7. 21. CSS display CSS display CSS에서 display는 화면에서 요소들을 어떤 식으로 배치할 것인지 지정해주는 속성입니다. 여기서 요소란 HTML에서 작성되는 태그를 의미합니다. 예를 들어 요소란 ' 안녕하세요 ' 이런 구조를 요소라고 부르고 있습니다. 본론으로 돌아와 HTML을 공부하셨다면 아실 내용이지만 HTML은 기본적으로 적용되는 스타일이 있습니다. 굵기, 폰트 크기, 폰트, 테두리 등이 있는데 그중 inline 속성과 block 속성에 대한 내용이 있습니다. 먼저 inline 속성을 가진 태그들은 한 라인에 자신의 앞과 뒤에 있는 태그들을 배치할 수 있는 속성입니다. 대표적으로 span 태그가 있는데 span 태그를 사용하면 앞과 뒤에 있는 태그들이 같은 위치에 배치되는 특징이 있습니다. 다음은 blo.. 2022. 7. 20. CSS 미디어 쿼리(Media Query) CSS 미디어 쿼리(Media Query) 오늘은 저번 시간에 다뤘던 반응형 웹, 적응형 웹 중 현재 가장 많이 사용되는 반응형 웹 디자인에서 기초적으로 사용되는 미디어 쿼리(Media Query)를 알아보겠습니다. 반응형 웹을 간단하게 정리하면 웹 사용자들이 사용하는 디바이스에 따라 보기 편하게 변화하는 웹 디자인입니다. 그래서 반응형 웹을 사용하는 대표적인 홈페이지로 애플을 예로 들었습니다. 만약 안 들어가 보셨다면 꼭 가서 반응형 웹에 대해 경험해보셨으면 좋겠습니다. 미디어 쿼리는(Media Query) CSS에서 사용하는데 화면의 크기에 따라 텍스트의 크기나 이미지의 크기, 버튼의 생성 여부 등의 변화를 부여하여 반응형 웹을 만들 수 있습니다. 작성 예시를 보여드리면 '@media (조건){선택자.. 2022. 7. 20. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90 반응형
