HAHYE_ARCHIVE

수업시간에 반응형 웹을 배우면서 메뉴바만들기 복습을 했는데 복습을 해도 너무 어렵고 이해가 잘 안가는거같아서 또 복습을 해본다! 기본 html 코드는 아래와 같다 SeSAC Home Menu1 Menu2 Menu3 이렇게 html을 짜고 나면 요런 기본 페이지가 나옴! 이제 css 추가를 해보자! a { text-decoration: none; color: black; } .menuList { list-style: none; } li { display: inline; float: left; } 💡 수직메뉴를 수평메뉴로 바꾸는법!! 태그의 display값을 inline으로 바꿔준다 float 속성을 이용해 li 태그에 left 값을 넣어준다 a태그의 텍스트 데코레이션 속성을 none으로 주면서 하이퍼링크에..

🌱 CSS 위치 속성 🖥 위치 설정 방법 절대 위치 좌표 : 요소의 x좌표와 y좌표를 설정해 절대 위치를 지정 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정 🖥 position 속성 키워드 설명 static 상대 위치 좌표 설정, 디폴트 relative 초기 위치에서 상하좌우로 이동 absolute 부모를 기준으로 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표 설정 ✔️ position:static 브라우저의 디폴트 배치방식, HTML 태그의 작성된 순서대로 출력 위치를 정함 top, bottom, left, right 속성 값은 적용 안됨 ✔️ position:relative 기본 위치에서 left,top,bottom, right 속성의 값만큼 이동한 상대 위치에 배..

🌱 CSS 다양한 단위 🖥 크기 단위 단위 설명 em 비율 rem 비율 % 퍼센트 px 픽셀 수 cm 센티미터 mm 밀리미터 in 인치 pt 포인터 ✔️ CSS3에서 가장 많이 사용하는 단위 ✔️ font-size, width, height 속성 등에 적용 💡 더 자세하게 알아보기! em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정 (부모의 2배) 부모 요소에 따라서 크기가 변경되어야 하는 경우에 사용 rem r = root 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 (1rem=16px) 웹 페이지 내에서 항상 고정된 크기를 가져야 하는 경우에 사용 요약해보면? 1배 = 1em = 100% 1.5배 = 1.5em = 1..

🖥 을 20px blue로 출력하는 CSS3 스타일시트 1 셀렉터 CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름 2 프로퍼티 스타일 속성 이름. 약 200개 정도의 프로퍼티 있음 3 값 프로퍼티의 값 4 주석문 /* ... */ 아무 위치에나 사용 가능 ∙특징 : 대소문자의 구분이 없음 🌱 HTML 문서에 CSS3 스타일 시트 적용하는 방법 ✔️인라인 스타일 (Inline style) ✔️내부 스타일 시트 (Internal style sheet) ✔️외부 스타일 시트 (External style sheet) 🖥 인라인 스타일(Inline style) ∙ HTML요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 ∙ 해당 HTML요소에만 스타일을 적용할 수 있음 ∙ 하나의..

🖥 웹 페이지 구성 3요소 ∙HTML : 웹 페이지의 구조와 내용 / 제목, 본문(텍스트, 이미지, 표 등), 머릿말, 꼬릿말 등 ∙CSS : 웹 페이지의 모양 / 글자 크기 및 색, 배경 ∙Javascript : 웹 페이지의 행동 및 응용 프로그램 / 마우스 클릭, 키 입력 등을 처리하는 코드, 여러가지 계산, 차트, 게임, 지도 등 다양한 프로그램 🖥 HTML 기본 용어 ✔️태그 (Tag) ▪️요소를 만들 때 사용하는 기호 ✔️요소 (Element) ▪️시작 태그와 종료 태그로 이루어진 모든 명령어 Hello HTML5 여기에서 은 시작태그 Hello HTML5 는 컨텐츠(내용) 는 종료태그 ✔️속성 (Attribute) ▪️태그에 추가 정보를 부여할 때 사용 Hello HTML5 여기에선 title..

https://www.youtube.com/watch?v=cb7VlXqFla4 기초부터 다시 공부해야 할 거 같아서 유튜브에 있는 기초영상들 돌려보기 시작~!! 제일 처음 본 영상인데 내가 궁금했던것들을 잘 풀어주셨다. 특히 영단어들... 사전보고 검색하면 뜻은 이해갔지만 정작 HTML, CSS에서는 어떤 의미인지 알쏭달쏭했는데 시원하게 해결해주셨다 HTML & CSS • 콘텐츠 = HTML Element라고함. • HTML은 Element의 조합 • Attribute = 속성 (Element에 속성 넣어주기 ex:width, src …) • Style = Element의 디자인을 입혀주는 역할 • CSS = 전체 페이지 Element에 디자인을 한 번에 쉽게 적용할 수 있음. • 이벤트 = 웹페이지 내..