오피스랩

네이버를 참조한 기본 쇼핑몰 레이아웃입니다. 판매 상품들 먼저 inex.html파일로 틀을 짜줍니다. 그다음 index.css파일로 스타일을 지정해주세요. #header { height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } head는 화면을 풀로 채울거기때문에 높이는 임의로 64px 지정하시고 display는 flex로 justify-content는 center로 그리고 하단에 선을 1px gray로 주도록합니다. body { margin: 0; padding: 0; } body를 지정하지않으면 border 양쪽여백이 생기게 되므로 상단에 위와같이 작업해주세요. #header { height: 64p..

CSS란? 밋밋한 HTML에 디자인을 꾸며주는 언어입니다. 선택자(Selector) 선택자는 스타일을 적용할 대상입니다. 태그, id, class 등을 선택 할 수 있습니다. /* 태그를 선택자로 했을 때 */ p { color: red; } /* 태그를 id로 했을 때 */ #title { color: blue; } /* 태그를 class로 했을 때 */ .item { color: pink; } id는 한요소에만 적용되며 class는 class가 적용된 모든 요소에게 적용됩니다. Hello world my officelab id 적용 요소 class 적용 요소 복합선택자 복합선택자는 하위선택자 (Descendant Selector)와 자식 선택자 (Child selector)이 있다. 자식 선택자 아이..

HTML 태그는 정보를 보여주는 역할을 합니다. 이미지, 텍스트등은 모두 HTML로 만들어진다고 보면 됩니다. 1. 기본 형식 콘텐츠 내용 my office lab 2. 링크를 걸어 이동시키기 Hello my office lab 3. 콘텐츠가 없다면 "/"로 마무리 4. 태그안에 또 태그를 삽입하기 Helloy my office lab 5. HTML 주석 사용하기 6. 제목 표시하기 Hello officelab Hello officelab Hello officelab Hello officelab Hello officelab Hello officelab 7. 내용 엔터 8. 이미지 넣는 태그 9. 영역을 나누도록 도와주는 태그 ((div를 하나의 박스라고 생각하세요.)) 네이버페이 입니다. 10. 로그인,..