반응형 레이아웃5 2023 웹디자인 기능사 실기 레이아웃 : 메뉴바 2023 웹디자인 기능사 실기 레이아웃 : 메뉴바 레이아웃, 메뉴바, 이미지 슬라이드 참고 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd 레이아웃 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/layout MENU-1, MENU-2 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/menu 레이아웃 다양한 방법 참고 : https://dongjin6539.github.io/web2023/layout/index.html 메뉴바 코드 구성 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서.. 2023. 4. 29. 웹디자인 기능사 시험 연습 웹디자인 기능사 시험 연습 오늘 웹디자인 기능사 시험을 연습해봤습니다. 웹디자인 기능사 중 레이아웃만 연습을 해봤습니다. 연습 문제는 Q-Net에 올라와있는 시험 문제를 활용해서 시도해봤습니다. (https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079) 그 중 A타입 유형, B타입 유형, C타입 유형을 연습했습니다. 다행히 레이아웃 만드는 방법은 수업시간에 잘 가르쳐 주시고 연습을 많이 해서 엄청 어렵진 않았습니다. 방법 중에는 flex를 사용해서 했습니다. 각 유형을 확인해보니 유형 내에서 지정해 놓은 footer 구역이 서로 변화가 있습니다. A타입 유형 로고 메뉴 이미지 슬라이드 공지사항 갤러.. 2023. 3. 16. 레이아웃 - flex 유형 레이아웃 - flex 유형 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하는 레이아웃을 잡는 것이다. display: flex; 위의 구문을 사용해서 해당 요소에 flex로 레이아웃을 설계한다고 선언하면 됩니다. flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없으니 참고하세요. 이제 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, main 구역, footer 구역을 만들어줍니다. he.. 2023. 3. 1. 레이아웃 - float 유형 - 반응형 레이아웃 - float 유형 - 반응형 https://dongjin6539.tistory.com/14 앞서 블로그에서 레이아웃 float유형에 대해 알아보았습니다. 지금 블로그에서는 사용자가 모바일을 사용해도 깨지지 않는 반응형에 대해 알아보겠습니다. 그럼 보러 가시죠!!! 예시를 만들어서 작성해보겠습니다!!! 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, sectioin 구역, footer 구역을 만들어줍니다. head 태그에 style 태그를 입력해줍니다. 구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0.. 2023. 3. 1. 레이아웃 - float 유형 레이아웃 - float 유형 block 요소는 원래 세로로 나열되지만 float을 이용하여 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위한 필수적인 속성이다. float을 지정하는 방법과 float을 해제하는 방법도 있다. 속성 값 설명 left 요소를 왼쪽에 배치하고 나머지 콘텐츠를 그 주변을 흐르도록 함 right 요소를 오른쪽에 배치하고 나머지 콘텐츠를 그 주변을 흐르도록 함 none float 실행을 취소할 때 사용 함 예시를 만들어서 작성해보겠습니다!!! 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, aside 구역, sectioi.. 2023. 2. 24. 이전 1 다음 반응형
