madogawa

#학습목표 스타벅스 뱃지 만들기 먼저 html코드를 작성 해 줍니다. html코딩은 아주 간단합니다. 그리고 기본적인 css코딩을 짭니다. #body선택자에 height에 3000픽셀로 높이값을 넣어줍니다. #header 부분에 position 값을 넣을건데, 잠깐 relative를 주석 처리하고 fixed로 값을 넣어줍니다. 그리고 top을 기준으로 작성 해 주고요. 뷰포트를 기준으로 배치되는 것이기 때문에, 헤더라는 요소의 가로너비는 auto고, 이 auto를 통해서 브라우저가 자동으로 계산하면서 요소의 너비를 최대한으로 많이 사용하려고 하지 못하고, 저 이미지처럼 가로너비를 최소한으로 사용하려고 시도를 해요. 우리가 알고 있는 최대한이 아니고, 최소한으로 개념이 바뀌는 겁니다. 이;러한 현상은 포지..

#학습목표 서브메뉴의 4개의 항목을 만들어서 링크를 걸어둡니다. 4개의 항목사이에 3개의 수직바를 넣어줍니다. 돋보기모양의 아이콘을 넣고, 돋보기 모양을 클릭하면, 검색창이 뜨는 효과를 넣어줍니다. 초록색 테두리를 넣어줍니다. 또 placeholder를 넣어줍니다. #실제로 완성한 이미지 HTML 작성 코드 태그를 작성. 태그를 작성. (ul태그는 li태그랑 세트로 기억하세요.) 태그 4개 작성 Sign in이라는 특정한 페이지로 가게 만들겠다, 라고 선언하는 것. 아직 페이지가 준비가 되지 않았다면, 입력 해 둘수 있는 코드. 자바스크립트로 어떤 동작을 넣을건데 그 동작이 '0', 즉 '없다'라는 뜻. *또는 '#(헤쉬)'도 넣어도 된다. '#'는 몇가지 쓰임이 있지만, 그중 CSS ID 선택자를 이용..

# header태그 html에서는 기본적인 태그들은 이미 핵심요소로 만들어져 있다. 예를들면 header태그! 엄연히 html에 존재하는 태그이고요, 일단 특별한 기능은 없어요. (단순하게 이 부분이 사이트의 헤더영역이다라는 기본적인 의미만 가지고 있다고 보시면 되어요.) 우리가 대표적으로 div 태그를 이용해서 어떤 구조들을 만들고 화면에 출력을 할 수가 있겠는데, 그러면 그렇게 만들어진 구조가 어떤 역할을 하는지 알기가 쉽지않거든요. 그래서 사실 많은 경우에 이렇게 클래스를 부여해서 대표적으로 헤더라는 이러한 이름들을 부여함으로 해서 우리는 그 요소에 어떤 의미를 부여하게 되는데요. 이 html은 기본적으로 그러한 의미를 가지는 몇가지 태그가 있고요, 헤더태그가 그런 것 중 하나입니다. #header..

#. 모든 것들이 완벽한 디자인 시안은 나오지 않을 수 있다. 기본적인 디자인을 요청하는 것도 번거롭다. #.Google Material Icons 구글에서 제공하는 머터리얼 아이콘을 무료로 사용할 수 있습니다. 아래 링크태그를 통해서 구글 머터리얼 아이콘의 연결 주소가 있는데, html에 붙여넣기를 합니다. Head태그에는 링크태그를, Body태그에는 div 태그를 붙여넣기. (아래 링크는 강사님의 깃허브에서 가져 올 수 있음.) #.우리가 적용한 링크태그보다 Google Material Icons은 최신버전으로 올라오는데요. 그래도 아이콘의 이름은 그래도 활용 할 수 있거든요. 클래스 이름이 버전이 다르기 때문에 소스코드가 다른건데요, 그안에서 사용하는 아이콘의 이름은 같아요(예를들면 search라던..

#기본적으로 지정없이 글꼴을 정해두지 않으면 브라우저마다 다른 글꼴이 나오기 때문에 코드작성을 해 두는 것이 좋다. #google Font에서 글꼴 가져오기(무료인지 확인) 보통은 글꼴을 지정할 때 링크방식을 사용하니까 링크를 선택 해 줍니다. (@import는 직렬방식 link방식은 병렬방식) #html로 가져오기 #css도 가져오기 이거도 복사해서 가져오세요. #개발자 도구에서 폰트가 잘 적용이 되었는지 확인하기 개발자도구의 Computed로 들어가서 적용이 잘 되었는지 확인하세용! font-family를 체크.

#오픈그래프 웹페이지가 소셜 미디어, 페이스북등, 으로 공유 될 때 우선적으로 활용되는 정보를 지정합니다. #웹페이지가 공유된다라는 의미 카카오톡으로 링크를 공유할 때 이 오픈 그래프가 사용됩니다. 대표적으로 카카오톡 같은경우는, 이렇게 주소를 메세지로 입력을 해서 전송을 하게되면 카카오톡 내부에서 페이지에 접속을 해서 사용자들이 볼 수 있는 최소한의 메타 정보만 끌어다가, 이렇게 사이트 이름은 무엇인지 기본적인 설명은 무엇인지 그 다음에 로고 같은 것들은 무엇인지 이렇게 표시를 할 수 있는 기능이 들어 있어요. 카카오톡이 해당하는 페이지에 접근을 해서 모든 내용을 다 확인하는 것이 아니고, 딱 중요한 정보만 빠르게 가져가는 것이기 떄문에 우리는 그렇게 중요한 정보들을 우선적으로 제공할 수 있도록 오픈그..

#favicon.ico #Title 부분에 로고 이미지 넣기 @vscode 아이콘을 삽입하는 코드는 전혀 보이지 않지만, 타이틀에서 아이콘 이미지가 보이는 이유는, 대부분의 브라우저는 favicon.ico파일이 있으면, 그 파일을 자동으로 찾아다가 그 해당하는 페이지의 탭에 아이콘으로 사용합니다. 딱 저 이름 그대로 사용하세요. 만약 해상도가 떨어져서 png파일로 쓰고 싶다면 Head태그에 으로 아이콘을 명시 할 수 있다.