웹디자인퍼블리싱
-
웹디자인퍼블리싱 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..
-
웹디자인퍼블리싱 HTML & CSS웹사이트/HTML & CSS 2021. 7. 12. 16:53
*제 글을 순차적으로 따라오신다면 웹사이트를 1시간 안에 만들 수가 있습니다. 그럼 시작하겠습니다. 웹디자인퍼블리싱을 하기 위해서 먼저 사전 준비물이 필요합니다. 잠깐!! 컴퓨터가 필수입니다. 컴퓨터 없이 하시려는 분 안 계시겠죠?? 1. 웹디자인 퍼블리싱할 재료 즉 웹디자인이 있어야 합니다. 2. 코딩에 필요한 텍스트 에디터가 필요합니다. 여기서 저는 Visual Studio Code를 이용할 것입니다. 자 이제 시작해보기 앞서 편안하게 보시면서 따라 해 보시길 바라겠습니다. 저는 폴더를 만들어서 폴더명을 "퍼블리싱"이라고 만들겠습니다. 자 그럼 폴더 만들었으면 이제 Visual Studio Code를 저는 code라고 말하겠습니다. code를 열어 주세요 파일에서 열기를 눌러주세요 여기서 아까 전에 ..