시맨틱 태그 - 의미가 있는 태그 시맨틱 태그가 아닌 태그 div, span 문서 구조를 위한 HTML5 시맨틱 태그 : 사이트 상단 : 메뉴 : 영역 : 영역 안 내용 : 측면 : 문서 포함하는 웹 브라우저(창) src : 웹페이지의 경로 seamless : 경계선 제외 width, height scrolling - auto - 자동 | yes - 스크롤바 O | no - 스크롤바 X name : target에 iframe name을 지정해서 이동(부모창 → 자식창) : 하단쪽 : 사이트 정보, 연락처, 주소 .. 모바일 기기와 웹 디자인 뷰포트 : 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하기 width : device-width height : device-height user-scalable..
WEB/HTML5+CSS3
CSS 포지셔닝과 주요 속성들 CSS 포지셔닝 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것 box-sizing content-box : 기본값, 내용물 기준, 내부 여백, 경계선 → 전체 크기가 증가 border-box : 경계선 기준, 내부 여백, 경계선 → 크기 X → 내용물의 크기가 감소 float left : 왼쪽 배치 right : 오른쪽 배치 none 참고) 작업할 땐 float 안 쓰고 flexbox 많이 쓴다. clear float : 적용 속성을 제거 left : float:left 적용 제거 right : float:right 적용 제거 both : float:left, float:right 모두 제거 공간이 있는 요소(block, inline-block)에서만 ..
CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨(block-level) 요소 공간 O, 너비(width), 높이(height) 지정 줄개행 p, h1~h6, div 외부 여백(margin) : 상하좌우 적용 가능 인라인 레벨(inline-level) 요소 공간 X, 너비(width), 높이(height) 지정 X 줄개행 a, i , u, span 외부 여백(margin) : 좌우 여백만 적용 가능 박스 모델(box model) - 박스 형태의 콘텐츠 블록 레벨 요소 width, height 속성 - 콘텐츠 영역의 크기 display 속성 block : inline → block inline : block → inline inline-block : inline(줄 개행 X) + block..
웹에서 색상 표현하기 16진수 표기법 rgb와 rgba 표기법 색상 이름 표기법 배경 색과 배경 이미지 background-color background-clip border-box padding-box content-box background-image→ url 경로 → 배경 이미지 background-repeat repeat : 좌우, 상하 반복 → 기본값 repeat-x : 좌 → 우 반복 repeat-y : 위 → 아래 반복 none : 반복 없음 background-size auto : 이미지 원본 그대로 출력 contain : 이미지를 영역 안으로 축소/확대 cover : 이미지를 영역 안으로 채우기 크기값 background-size: 너비 높이; 백분율 너비, 높이를 함께 지정 → 이미지 ..
글꼴 관련 스타일 font-familyfont-family: 글꼴명, 글꼴명(대체 폰트), 글꼴명, ….; → 처음 글꼴이 없으면 다음 글꼴로 대체되고 다음이 없으면 그 다음으로 대체… 시스템 폰트 : OS에 설치된 폰트 참고) 글꼴 명에 띄어쓰기가 있는 경우 반드시 따옴표로 감싸기 : “글꼴명” 맑은 고딕 ⇒ font-family: “맑은 고딕”; //맑은 고딕은 윈도우 11부터 제공 안 한다. 다운 받아야한다ㅜ MS(마이크로소프트)에만 있는 폰트 font-family: “맑은 고딕”, AppleGothic; → MAC 에는 맑은 고딕이 없어서 애플고딕으로 대체해서 쓴다. / OS 마다 글꼴이 없을 수 있어서 대체 폰트 중요! / 그치만 OS가 다른 환경이든 똑같은 글꼴을 요구한다. 그래서 OS가 달라..
스타일과 스타일 시트 스타일 형식속성명 : 값;…→ 선택을 무엇으로 할 것인지, 속성명을 무엇으로 할 것인지가 중요하다!! } 속성명 : 값; 선택자 { 스타일을 표기하는 방법 스타일 주석 설명 적용 배제 /* 설명 …* 스타일과 스타일 시트 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것스타일 정의→ 문제가 많아서 잘 안 쓴다. 외부 스타일 시트 확장자 : 파일명.css → 보통 내부, 인라인 스타일 시트보다 외부 스타일 시트를 이용한다. 인라인 스타일 태그 속성 - style 속성에 직접 스타일 정의 실습) 04 폴더 안에 css폴더 만들어서 style.css 파일 만들기 거기서 작성시작! ex01.html에 코드 넣어주기 주요 선택자 전체 선택자 : 모든 태그 요소를 선택 :..
https://dm.n-mk.kr/manager/login → 아이디 회원가입 여기서 많이 보고 할것이다. 폼 만들기 양식 태그 input : 입력 text - 한줄 텍스트 입력 password - 비밀번호 전용 / 입력 텍스트 감춤 처리 radio - name 속성이 같은 여러개 중에서 한개 선택 → name 그룹당 하나만 선택 가능 checkbox - 여러개 중에서 여러개를 선택 submit - 양식 제출 버튼 reset - 다시 입력 버튼button 태그 → 기본값이 submit 이라서 제출됨 reset - 다시 입력 버튼 button - 일반 버튼 → 보통 얘를 많이 쓴다. type : submit - 제출 버튼 (기본값) 참고) value :submit, reset → 버튼명name :반드시 n..
→ 24년 3월 21일 첫번째 강의 녹화 없음 어려운 부분 물어봐서 두번째 영상 첫번째에 잘 설명해주심! 이미지 웹에서 사용하는 이미지 형식 GIF - 최대 256가지 색상, 이미지 파일 형식에 비해 파일 크기가 작음(아이콘 등으로 많이 사용). 움직이는 이미지 만들수 있음 JPG - 사진을 위해 개발된 형식 PNG - 투명 배경도 가능, 네트워크용으로 개발 → 웹에 특화됨, 많이 사용할 것이다. 태그 - 이미지 삽입하기 src 속성실습)아임닭 로고에 마우스 올려놓고 오른쪽 클릭해서 검사 들어가면 로고에 다시 돌아와서 아임닭 로고에 마우스 올려놓고 오른쪽 클릭하고 이미지 다른 이름으로 저장해서 다운 받기, 다운 받은 사진 03 폴더에 넣기 → 웹 앞에 /가 있으면 절대경로 https://www.imdak..
→ 앞으로 사용할 기본 구조!! Lorem하고 엔터치면 무작위 문장을 만들어준다 뉴스에서 한 문단을 태그 안에 넣기 너무 기니까 View에서 Word Wrap 클릭하면 보기 편하게 해준다. Lorem Lorem Lorem → 실행결과 Lorem 주변 아래 박스 다 오렌지색 텍스트 관련 태그들 텍스트를 덩어리로 묶어 주는 태그(block 레벨 태그) 블록 레벨 : 혼자 한 줄을 차지, 너비가 100이라는 것이다. 인라인 레벨 : 줄을 차지 하지 않는 요소 문서 문단 : block 레벨 태그 p 태그 - paragraph -너비, 높이 지정 -외부 여백 상하 좌우 적용 가능 문장 : inline 레벨 태그 a 태그, span, i -너비, 높이 못 함 -외부여백(margin 좌우만 적용 가능 문장1 문장2 ..
네이버 빈 화면에 마우스 오른쪽 버튼→검사 네이버 웹페이지는 어떻게 되어 있는 지 한 번 보기! Always match Chrome’s language 파란 버튼 누르면 한글로 보인다. ? 웹 표준 -웹사이트를 만들 때 지켜야 하는 약속 HTML 기본 문서 구조 태그 … : 단일 태그 → 간단한 HTML 문서 만들기 HTML 문서 기본 구조 살펴보기 → HTML5 버전임을 알려주는 태그 → 사이트에서 보이지 않는 부분 : 정보, 자원(스타일 파일, 자바스크립트 파일) / meta 사이트에 대한 정보를 넣는다. → 눈에 보이는 출력하는 기능, 사이트에 대한 정보가 담겨져 있다. 정보를 정의한다. ~ → /는 생략 가능 ex) → 여는 태그 닫는 태그 웹 문서에서 특수 문 d 드라이브 조정인 폴..
