레이아웃10 사이트 만들기 : 텍스트 유형3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형03 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 텍스트 유형2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형02 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 텍스트 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형01 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 카드 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 카드 유형01 카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 바질 키우는 법 🌱 바질 키우.. 2022. 8. 8. 레이아웃 만들기 5 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조이며, 가운데의 콘텐츠 영역이 단순하게 나뉘어진 구조입니다. 실제 사이트에서 이런 구조를 많이 사용합니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. See the Pen 레이아웃 float5 by hjkang306 (@hjkang306) on CodePen. 2. flex를 이용한 레이아웃 만들기 flex를 이용하면 float에 비해 훨씬 간단하게 레이아웃을 만들 수 있습니다. 이 방법은 인터넷 익스플로러 환경에서는 호환되지 않으므로 주의합니다. See the P.. 2022. 7. 29. 레이아웃 만들기 4 레이아웃04 이 레이아웃은 전체 영역이 들어가고, 메인 콘텐츠 영역의 구역이 단순하게 나뉘어진 레이아웃 입니다. 복잡한 구조가 아니기에 float방법으로만 레이아웃을 작성하였습니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. See the Pen 레이아웃 float4 by hjkang306 (@hjkang306) on CodePen. 2022. 7. 29. 레이아웃 만들기 3 레이아웃03 이 레이아웃은 가운데의 컨텐츠가 aside, section1, 2, 3으로 네개의 구역으로 나뉘어진 레이아웃입니다. 이런 복잡한 레이아웃은 grid방식을 사용하면 효율적으로 만들 수 있습니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. float를 이용한 레이아웃 : clearfix float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 float를 적용하는 요소의 부모요소에 clearfix라는 가상요소를 만들어 clear: b.. 2022. 7. 29. 레이아웃 만들기 2 레이아웃02 이 레이아웃은 가운데에 있는 콘텐츠 영역이 aside와 section, article의 세개의 구역으로 나뉘어진 구조입니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. float를 이용한 레이아웃 : overflow: hidden; float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 float를 적용하는 요소의 부모 요소에 overflow: hidden;을 작성하는 것입니다. See the Pen 레이아웃 float2 by .. 2022. 7. 29. 레이아웃 만들기 1 레이아웃01 이 레이아웃은 가운데에 메인 구역이 들어간 구조입니다. 콘텐츠 부분이 aside와 section 두개뿐인 단순한 구조입니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. float를 이용한 레이아웃 : clear: both; float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 footer에 clear: both;를 작성하는 것입니다. See the Pen 레이아웃 1 by hjkang306 (@hjkang306) on Code.. 2022. 7. 29. 레이아웃을 만들기 레이아웃 만들기 레이아웃을 만드는 방법에는 float를 이용한 방법, flex를 이용한 방법, grid를 이용한 방법이 있다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법이다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 한다. float를 이용한 레이아웃 코딩(1) : clear: both; float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있다. 이를 해결하기 위한 방법 중 하나는 footer에 clear: both;를 작성하는 것이다. See the Pen 레이아웃 1 by hjkang306 (@hjkang306) on CodePen. .. 2022. 7. 25. 이전 1 다음 728x90
