반응형 programming760 html5 css3 홈페이지 메인 콘텐츠 영역 만들기 콘텐츠는 왕이다 contents is king 홈페이지의 메인 콘텐츠는 중요한 내용과 홈페이지의 소개 등을 보여주는 영역이다. 홈페이지를 방문한 사람은 메인 화면을 통해 특성을 알 수 있고 어떤 내용이 있는지 예상해 볼 수 있다. 필요한 정보와 연관된 정보를 메인에 한꺼번에 보여준다면 방문자를 잡아 둘 수 있다. 개별 콘텐츠의 양이 많거나 콘텐츠의 특성별로 목록으로 나열한다면 방문자는 한동안 머물면서 콘텐츠를 살펴볼 것이다. html5 css3 홈페이지 콘텐츠 메인 영역 만들기 콘텐츠는 왕이다 contents is king display flex 를 이용하면 여러가지 귀찮은 작업이 없어진다. 홈페이지 메인을 구성할 때도 이것을 이용하면 수월하게 레이아웃을 잡을 수 있다. 이제는 콘텐츠 영역을 작업해 볼 것이다. 콘텐츠는 왕이다란 말이 있다. 단순히 .. 2022. 11. 23. html5 css3 네비게이션 메뉴 수평 정렬 하기 display flex 사용 css3의 display flex 속성은 html5 태그 요소를 수평 또는 수직 정렬하도록 한다. display flex의 기본값은 좌측에서 우측으로 단일로 진행하는 수평정렬이다. flex-direction 과 justify-content 등의 속성에 옵션을 주어 정렬 방법과 표현 방식을 다르게 설정할 수 있다. html5 css3 네비게이션 메뉴 수평 정렬 하기 display flex 사용 css3의 display flex 속성은 일정하게 나열된 html5 요소들을 수평 또는 수직으로 정렬하는 역할을 한다. 과거에는 float 를 사용하여 정렬을 했지만 불편한 점이 많았었다. display flex 을 사용하면 수월하게 정렬을 할 수 있다. 기본값은 수평정렬이며 좌측에서 우측으로 진행한다. 네비게이션 .. 2022. 11. 22. html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 홈페이지를 만들 때 메뉴를 추가할 때 목록 태그인 ul 을 할 수 있다. ul 태그는 목록을 나타낼 때 사용되는 태그로 메뉴나 페이징과 같은 간단하고 연속적인 데이터를 표현할 때 사용한다. 목록 태그는 기본적으로 점이나 숫자가 붙는데 이것은 list-style-type 을 사용하여 초기화하고 목록 태그에 붙는 스타일을 나타나지 않도록 할 수 있다. html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 목록 태그 ul 은 화면에 표시되는 문자열 데이터를 목록처럼 만들어 준다. 형태는 책의 목차와 비슷한 성격을 보인다. 위에서 아래로 일정한 간격으로 표시되기 때문에 간단한 목록이나 메뉴와 같은 네이게이션 페이징 등과 같은 기능에 사용된다. 단지, ul 태그는 점이 하나씩 붙는데 기본값으로 표시되는.. 2022. 11. 22. html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 초기화를 진행한 html5 태그들은 서로 붙어있고 보기가 불편하다. 여백은 가시성을 높여지고 화면에 표시되는 콘텐츠들의 구역을 구분짓는 역할을 한다. 초기화 되어 서로 붙어있는 태그들에 여백을 줄 때는 css3의 바깥여백과 안쪽여백을 줄 수 있다. 바깥여백은 margin 속성을 안쪽여백은 padding 속성을 이용한다. html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 html5 태그를 이용하여 레이아웃을 할 때 먼저 모든 태그들의 요소들에 대한 초기화를 한다. 초기화 이후 다닥다닥 붙어있는 모양새가 너무 보기 싫다. 여백을 주면 조금은 나아보이고 화면에 표시할 콘텐츠들이 항목별로 구분되는 효과를 볼 수 있다. 여백을 주는 방법은 초기화할 때 사용했던 marg.. 2022. 11. 21. 이전 1 ··· 24 25 26 27 28 29 30 ··· 190 다음 반응형
