전체 글
-
css로 드롭다운메뉴 만드는법웹사이트/HTML & CSS 2021. 7. 25. 16:19
flex를 이용한 네비 만드는 법에 소스코드를 이용하겠습니다. html LOGO menu1 sub1 sub2 sub3 menu2 sub1 sub2 sub3 menu3 sub1 sub2 sub3 menu4 sub1 sub2 sub3 로그인 회원가입 css *{ box-sizing: border-box; color:#eee; text-decoration: none; list-style: none; } body{ background-color: rgba(220, 220, 220, 0.5); } .header{ width: 100%; height:100%; position: relative; } .section{ width: 1720px; height: 100px; background-color: rgba(0,..
-
flex를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 23. 14:03
flex를 이용한 네비를 만들어보겠습니다. 완성된 소스코드부터 보여드리겠습니다. LOGO menu 1 menu 2 menu 3 menu 4 로그인 회원가입 *{ color:#000; text-decoration: none; box-sizing: border-box; } .header{ width: 100%; height:100%; } .section{ width: 1720px; height: 100px; border: 1px solid; margin: 0 auto; position: relative; display:flex; justify-content: space-between; } .logo{ font-size:36px; flex: 1; padding: 0 0 0 30px; line-height: 2..
-
float를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 21. 18:11
float를 이용한 navigation bar 만들기 LOGO menu 1 menu 2 menu 3 menu 4 로그인 회원가입 css 코드 *{ box-sizing: border-box; text-decoration: none; color: #000; } .header{ position: relative; width: 100%; height: 100%; } .header .section{ width: 1720px; border: 1px solid; height:100px; margin: 0 auto; } .header .logo{ float: left; width: 6%; font-size: 36px; height:100%; margin-left: 30px; line-height: 2.7; } .hea..
-
inline-block를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 19. 12:55
css를 이용하여 수평 nivigation bar를 만들어 보도록 하겠습니다. 3가지 방법으로 보여드리겠습니다. 1. inline-block을 이용한 navigation 2. float를 이용한 navigation 3. flex를 이용한 navigation 모양은 아래의 이미지대로 만들겠습니다. 로고 폰트 크기는 36px 메뉴 폰트 크기는 16px 로그인 회원가입 크기는 14px입니다. 아래 사진은 inline-block을 이용해서 css navigation bar를 만들었습니다. inline-block으로 하는 방법에 대해서 알아보겠습니다. 먼저 html 코드입니다. LOGO menu 1 menu 2 menu 3 menu 4 로그인 회원가입 css 소스코드입니다. *{ color:#000; box-si..
-
웹디자인퍼블리싱 HTML & CSS (5)웹사이트/HTML & CSS 2021. 7. 17. 21:40
CSS란? cascading style sheets(css)는 HTML, XHTML, XML 등 마크업 언어로 작성된 문서의 스타일을 꾸밀 때 사용하는 언어입니다. css 선언 방법부터 알아보겠습니다. 스타일은 폰트 컬러를 빨강으로 하고 테두리를 지정하는 스타일로 하겠습니다. 스타일 코드입니다. h1{ color: red; border: 1px solid; } html 소스코드입니다. Hello World! 1. h1태그에 style 속성을 추가하여 스타일을 지정합니다. Hello World! 2. head태그 안에 style 태그를 넣어 스타일을 지정합니다. 3. css파일을 만들어서 작성하고 그 작성 파일을 HTML 파일 안에 link태그를 이용하여 불러옵니다. 여기서 css파일은 style.css파..
-
웹디자인퍼블리싱 HTML & CSS (4)웹사이트/HTML & CSS 2021. 7. 17. 18:11
a태그와 form태그에 대해서 알아보겠습니다. HTML 이란 HyperText Markup Language 한글로 하이퍼텍스트 마크업 언어입니다. 여기서 하이퍼텍스트란 문서와 문서를 연결해주는 특성입니다. 즉 링크를 통해 여러 문서와의 연결이 가능합니다. 그 링크 역할을 하는 태그가 a태그입니다. a태그가 HTML에서 가장 중요하면서 자주 많이 사용합니다. 사용방법은 구글 이런 식으로 a태그 안에 href라는 속성을 이용하여 주소를 넣어줌으로써 그 역할이 가능해집니다. 만약 a태그만 넣고 href속성은 넣지 않으면 기능을 작동 안 하게 됩니다. 왜냐하면 a태그는 다른 문서와 연결해주는 기능을 한다고 말씀드렸는데 어떤 문서와 연결할 것인지 목적지를 안 알려줘서 그렇습니다. 내비게이션을 예로 들어 보겠습니다..
-
웹디자인퍼블리싱 HTML & CSS (3)웹사이트/HTML & CSS 2021. 7. 13. 14:47
이번에는 ul ol li class id를 알아볼게요 ul태그는 순서가 없는 리스트를 출력할 때 사용됩니다. ol태그는 순서가 있는 리스트를 출력할 때 사용되는데요 각각 태그는 li태그를 감싸줘야 합니다. 국어 수학 과학 음악 교시 교시 교시 교시 ul 태그와 ol태그를 작성해봤습니다. 이제 브라우저로 확인해보겠습니다. 이와 같이 ul태그로 감싼 li 태그들이 순서 없는 리스트를 보여주고 ol태그로 감싼 li태그들은 순서가 있는 리스트를 보여주게 됩니다. 또한 ul ol 태그들은 전에 배운 block & inline요소 중에서 block요소를 나타냅니다. class 속성은 element(요소) 들을 class로 구분하여 여러 개 클래스를 지정 가능하고 css 나 javascript에서 클래스를 선택하여 ..
-
웹디자인퍼블리싱 HTML & CSS (2)웹사이트/HTML & CSS 2021. 7. 12. 17:39
HTML 태그의 inline 요소와 block 요소의 대해서 알아보고 차이점과 대표적인 태그들이 무엇이 있는지 알아보겠습니다. HTML 작성을 먼저 해보겠습니다. div1 div2 div3 span1 span2 span3 위 코드를 작성하시면 코드를 작성하시면 위 사진처럼 출력이 됩니다. 여기서 div1 div2 div3은 block요소이고 span1 span2 span3은 inline요소입니다. 차이점이 보이시나요? 네~ 잘 맞추셨어요. div1 div2 div3는 한 줄에 하나씩 자리를 갖게 됩니다. span1 span2 span3는 한 줄에 친한 친구처럼 딱딱 옆으로 붙어있죠?? 이게 inline요소의 특징입니다. 또한 inline 요소는 height & width & margin & padding..