Information (189) 썸네일형 리스트형 자바스크립트 2 ***자료형(Data Type)*** 연산에 사용되는 값의 종류 *상수 : 값이 정해져 있는 형식 1. 정수 (Number Object, 숫자 객체) - 음수(-), 소수(.)를 제외한 양의 실수 - 8진수, 16진수 포함 (진수끼리 변환이 가능함) 2. 실수 (Number Object, 숫자 객체) - 실제 사용 가능한 모든 수 3. 문자형 상수(String) - 일반적인 텍스트 - ""사용 4. 불린(boolean) - true(1) / false(0)의 형식 5. null - 값이 없음 값이 있음 (not null) 6. undefind - 값이 정의되지 않음 7. object - object : 키와 값으로 구성된 여러 개의 값 - const a - {name:"john", class:1, sub.. [수업 아홉번째 시간] 웹린이의 아홉번째 html 수업 시간 **Flex(Flexible Box, Flexbox) 속성(부모요소에 줌, 자식요소가 정렬됨) 1. 아이템들을 가로 방향으로 배치 2. 내용물만큼 width 적용(=inline) 3. 아이템들의 height가 모두 컨테이너의 높이만큼으로 자동 적용(float은 각각의 콘텐트만큼 높이 설정) (☆부모요소한테 적용시켜도 자식요소에만 적용이됨) *Flex Container(플렉스 컨테이너) 1. flex의 영향을 받는 전체 공간 *Flex Item(플렉스 아이템) 1. 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것 helloflex abc helloflex container{ display:flex } **Flex 컨테이너 속성 1. flex direction : 배치 방향 설정 - row /.. 자바스크립트 첫 수업 * 자바스크립트 1. 웹 브라우저에서 읽고 실행되는 언어 2. 보안성이 없음 3. html 내에 작성 4. 대소문자의 구분 엄격 (aaa AAA) * 스크립트 주석 1. // : 한 줄 주석 2. /**/ : 여러 줄 주석 +) 일부의 명령어에는 태그 사용가능 ( object.innerHTML / document.write 등..) +) 자바스크립트는 연산능력이 있지만 html은 없음 ↓ * 적용 방법 1. 내부 스크립트 - html 문서 내에 스크립트 정의 후 직접 작성 - 필요한 위치에 2. 외부 스크립트 - 스크립트 효과를 다른 문서에 작성하고 "이름.js"로 저장 - 효과를 적용할 문서에 1. 내부 스크립트 2. 외부 스크립트 ☆ 자바스크립트코드가 실행되지 않을시 : 화면 빈곳 -> 마우스 오른쪽.. [수업 여덟번째 시간] 웹린이의 여덟번째 html 수업 시간 CSS box-sizing 속성 box-sizing 속성은 CSS의 테두리 영역의 크기를 결정함 box-sizing 속성값에는 content-box와 border-box가 있음 content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용 border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음 border-box : 지정한 CSS width 및 height를 전체 영역에 적용 border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있음 태그 등의 영역 크기를 100px으로 설정했을 때 100px 이상으로 가 더 튀어나와서 크기를 100px으로 딱 맞추고 싶을때 - box-sizing : bo.. [수업 일곱번째 시간] 웹린이의 일곱번째 html 수업 시간 box sizing 공부해오기 이럴경우 #title 태그로 적용이 됨 (단, 다른 태그가 걸려있으면 같이 됨) ## 점수환산법 적용2(점수 높은게 적용되는 기법) --- inline 1,000점 적용 ## 점수환산법 적용3(점수 높은게 적용되는 기법) *요소 레벨 문장의 중간에 태그를 작성하였을 때 줄이 바뀌는 태그들을 블럭 레벨 요소라고 부름 문장의 중간에 태그를 작성하였을 때 줄이 안 바뀌는 태그들을 인라인 레벨 요소라고 부름 *요소 레벨 문장의 중간에 태그를 작성하였을 때 줄이 바뀌는 태그들을 블럭 레벨 요소라고 부름 문장의 중간에 태그를 작성하였을 때 줄이 안 바뀌는 태그들을 인라인 레벨 요소라고 부름 div 요소레벨 -> 블럭 (기본 너비 100%, 사전에는 auto / 기본 높이는 0, 사전에.. [수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간 * 내용 작성 (사용자의 입장에서) 1. 이해하기 쉽게 (html) 2. 논리적으로 (페이지가변화해도 변하지 않는 상단(header) 및 하단(footer), 페이지가 변화하는 부분(mail/content, 컨테이너 등)->2가지로 나눈다) 3. 의미있게 4. 구조적으로 5. 콘텐트는 '제목+내용'으로 작성 6. 디자인에는 없는 요소들도 내용 전달에 필요하면 추가 작성 (html에는 사용자를 위해 입력했지만 디자인을 위해 css에서 감추기를 해놓음) 7. 중요도, 선호도, 사용빈도가 높은 순으로 (사용자가 필요로 하는것들 생각해보기) * 코딩 순서 1. 내용 작성 2. 마크업 : 용도나 목적에 맞는 태그 작성 3. 콘텐트 블럭 4. CSS 초기화 5. CSS 작성 6. 스크립트 적용 7. 프로그래밍 적용.. [수업 여섯번째 시간] 웹린이의 여섯번째 html 수업 시간 css 작성 방법 타이틀과 헤드 태그 사이에 css 작성 a {color : red} -> a라는 태그를 만나면 빨간색으로 바꿔줘 -> 예전에 쓰던 방식 -> 지금 쓰는 방식 문법적으로 띄어쓰기 마구 사용해도 문제없지만 사용x권장 (들여쓰기나 띄어쓰기도 다 글자로 인식하기 때문) { property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻) ;(그리고) } html상 주석 /* */ css3상 주석 css3에서는 베이직한 선택 방법 위주로 사용(selector) # : 요소 선택자(≒태그, element) 색상 사용시 : colorName / colorCode(ex : #aabbcc, #abc -> 여섯자리 또는 세자리임) / rgb(rgba ->a는 투명도까지 추가해서 .. [수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간 ---> 사람과 장치가 인식할 수 있도록 - 상단 로고, GNB, topmenu ---> 사람과 장치가 인식할 수 있도록 - 페이지별 내용, LNB, 배너, 게시판, 퀵메뉴 등 ---> 사람과 장치가 인식할 수 있도록 - 회사나 사이트에 대한 정보 - 각종 연락처, 관리자 정보, 약관 및 정책, 카피라이트 등 의미가 있는 태그 -> Semantic Elements **HTML5에서 추가된 Section 요소** 1. header - 페이지의 독자적 요소 - 로고 내비게이션 - 반드시 하나 이상의 제목(h1~h6) 명시 - section, header, footer 태그 사용 불가 - 요소의 위치 무관 2. article - 페이지 내용상 별개의 내용을 구성할 때 사용되는 섹션 3. section - 단락.. 이전 1 2 3 4 ··· 24 다음 목록 더보기
