프로그래밍 언어 13

[JS Basic] Variable & Data Type (var,let,const / undefined,null)

1. var / let /const 차이점 JavaScript에서는 var, let, const를 이용해서 변수를 선언할 수 있다. var ES5까지 var 키워드를 통해서만 변수 선언 가능. var를 사용해도 되지만, 최신 버전에 맞는 문법(let, const)을 사용하는 것이 좋다. 중복 선언 가능. var name = 'javascript'; console.log(name); // javascript var name = 'javascript2'; console.log(name); // javascript2 //동일한 이름 'name'으로 여러 번 중복해서 선언 가능 Function-level scope로 함수 내에서 선언된 변수는 함수 내에서만 유효, 함수 외부에서는 전역 변수로 취급. Hoisti..

[HTML&CSS Basic]<display:flex>Flexbox Froggy Level 24 Solution!

[Flexbox Froggy Level 24 Solution!] (Korean is at the bottom) 1. First of all, We can see that yellow frogs and the other frogs are separated. Therefore, we can guess that we need to use 'flex-wrap' properties to set them apart. 2. The flex items are placed vertically, so we need to use 'flex-direction' properties. 3. We can see that the red frog is placed on the top. To move it to the bottom, w..

[HTML&CSS Basic] 11. 레이아웃 배치(Position-absolute,-relative,-fixed/display -flex/float)

[CSS] Position 1. Position →position은 요소들을 어떻게 배치할지 정하는 속성 static(기본값으로 요소를 나열한 순서대로 배치) relative(원래 요소가 배치되는 위치를 기준으로 상대적 위치를 지정한다.) absolute(특정한 상황에서 가장 가까운 부모 또는 조상 요소를 기준으로 절대적으로 위치 지정) fixed(브라우저 화면을 기준으로 요소 배치) sticky(설정된 위치 전까지는 static, 그 이후부터는 fixed처럼 행동하는 속성) 2. relative position: relative; 만으로는 아무런 변화 없다. top,left,bottom, right 값을 추가적으로 설정하게 되면 원래 그 요소가 있어야 할 자리를 기준으로 위치가 이동하게 된다. Ex.)..

[HTML&CSS Basic] 10. List / Table / Input /button

[HTML & CSS] List List 1.Ordered List() 첫번째 두번째 첫번째 두번째 2.Unordered List() 첫번째 두번째 첫번째 두번째 [HTML & CSS] Table Table - 태그 사용 - :table row - :table data - :table heading(가운데 정렬 및 글씨 굵기 굵어짐) -rowspan 은 행 병합, colspan 은 열을 병합 2열 제목 3열 제목 4열 제목 2행 제목 1 2 3 3행 제목 1 2 3 4행 제목 1 2 3 5행 제목 1 2 3 6행 제목 2

[HTML&CSS Basic] 9. display: Block / Inline /Inline-Block

[CSS] Block / Inline /Inline-Block 1. Block 가로 크기가 부모 요소의 100%를 차지(쉽게 말하자면 옆(좌우측)에 다른 요소를 붙여넣을 수 없다) -대부분의 element는 block 요소(, , , , , , .......) -가로(width)와 세로(height) 크기를 지정가능. 2. Inline 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치 가능(옆에 다른 요소를 붙일 수 있다.) -, , ...... cf. 주의! width와 height 속성을 지정해도 무시된다. 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있고, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영X cf.)inline 성질을 block으로 변경 가능 span..

[HTML&CSS Basic] 8. Semantic Web & Semantic Tag

[HTML&CSS] Semantic Web(의미론적인 웹) (※https://ko.wikipedia.org/wiki/시맨틱_웹 을 보고 정리해본 것으로 아닌 것 같으면 말씀해주세요!) →웹상의 Data(resources)의 의미를 인간과 컴퓨터 모두 잘 이해할 수 있게 하여 정보 그 자체로 존재하는 것이 아니라 추출, 해석, 가공 등의 다양한 처리를 가능하게 하는 것. Ex.(출처:https://ko.wikipedia.org/wiki/시맨틱_웹) HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 기존에 내용 로만 나타낼수 있던 머리 부분을 내용 로 쉽게 더 의미론적으로 나타낼 수 있게 되었다. 이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보..

[HTML&CSS Basic] 7. Image(img, background-image)

[HTML&CSS]이미지 1. 태그로 이미지 넣기 alt: 이미지가 불러올 수 없을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트 src: 이미지 파일 경로 혹은 이미지 url 주소 2. background-image로 이미지 넣기(CSS 이용) → background-image:url("http://~~~~) Macbook Pro HTML 삽입 미리보기할 수 없는 소스 cf.)background-size를 조절 안하면 이미지를 담는 영역인 .ex의 크기만 줄이고 배경이미지는 원본 크기로 나타남. HTML 삽입 미리보기할 수 없는 소스 cf.) width,height값을 안 주면 div태그의 경우,div 태그 내부에 있는 내용의 세로 크기("Macbook Pr..

[HTML&CSS Basic] 6. CSS Selector, Inheritance

[CSS]CSS selector 1. CSS selector(추가 내용) 기존의 태그 선택자,클래스 선택자,ID 선택자를 제외하고 전체 선택자와 복합 선택자, 그룹 선택자, 가상 클래스 선택자, 가상 요소 선택자 등이 존재 1-1. 전체 선택자(Universal Selector)(*) →모든 요소를 선택 가능 *{ color: blue; } 1-2. 복합 선택자(Combinators) 1-2-1. 후손 결합자(Descendant Combinator)(공백 사용) →특정 요소의 모든 후손 요소에 적용 div p { background-color: yellow; } 1-2-2. 자식 결합자(Child Combinator)(>) → 모든 후손 요소가 아닌 직계 자식 요소만 선택(중간에 Wrapper 요소가 있..

[HTML&CSS Basic] 5. Margin & padding / Border / box-sizing

[CSS] Margin & Padding 1. Margin과 Padding HTML element는 아래와 같이 박스 모델로 되어있음. 박스 구성: Content(텍스트나 이미지), Padding (테두리와 컨텐츠 사이 거리) , Border(테두리), Margin (border와 다른 요소사이 거리) Example) 박스가 차지하는 영역: Content의 영역 + padding+ border+margin →273(content width) + 50(padding-left) + 50(padding-right) + 5(border-left) + 5(border-right) + 50(margin-left) + 50(margin-right) = 483 ●css로 표시 p.example { width: 273p..

[HTML&CSS Basic] 4. Font Style, Text Style

[CSS] Font Style 1. Font Style 1-1. font family font-family는 폰트 종류를 지정하는 속성 Ex.) #title { font-family: Georgia, "Times New Roman", Times, serif; } 사용자 브라우저 폰트 지원에 따라 Georgia→"Times New Roman"→Times→serif 순으로 폰트 사용 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야한다. (serif같은 폰트는 모든 브라우저 지원 가능 폰트) 1-2. font size font-size 는 폰트의 크기를 지정 .bigSizeFont { font-size: 50px; } cf.) h1 { font-size: 30px; } .bigSizeFont { ..

반응형