Dreams come true

[JS] 자바스크립트의 변수,형변환,조건문,반복문 기초

JavaScript : 브라우저에서 실행되는 인터프리터 방식의 프로그래밍 언어 - html 문서 내에 태그는 어디에나 작성이 가능하다. *인터프리터 언어? 순차적으로 실행되고 즉시 결과를 반환하는 프로그램의 언어 *.js 파일 : 외부 스크립트 파일을 적용할 때에는 src에 작성한다. 변수의 선언 ( var, let, const ) var 와 let은 변수를 선언한 뒤에 값을 변경할 수 있다. const 는 변하지 않는 값, 고정된 값을 선언한다. 선언과 동시에 값을 지정해야한다. var : 함수 스코프 (function-scope) 함수 코드 내를 제외하고, 바깥에서도 사용이 가능하다. let, const : 블록 스코프 (block-scope) 함수, if문, for문, while문, try/cat..

[CSS] Display Flex의 쉬운 가로, 세로, 가운데 정렬

display: inline-block ? 말고 flex !!!! block 과 inline 속성의 특징에 대하여 확실하게 알고있다면, display 속성을 알아 볼 차례이다. css 하면서 특히 많이 헷갈렸던 문제라 계속 연습해야된다고 생각한다.. 기본적으로 block 타입의 요소를 inline으로 변경하고싶다면 display : inline; 으로 inline 타입의 요소를 block으로 변경하고싶다면 display: block; 으로 속성에 변화를 줬을 것이다. 만약 block 타입을 inline처럼 옆으로 요소들을 배치시키고 싶다면 ?? display: inline-block을 사용할 수 있다. inline-block은 block의 속성을 가지지만 inline으로 옆으로 나열되게 해준다. 하지만 ..

[CSS] margin, padding, border 확실하게 알기

content : 요소의 텍스트, image 등의 실제 내용 padding : border(테두리) 안쪽에 위치히는 요소의 내부 여백 영역 (padding 속성값은 padding 영역의 두께) border : 테두리 영역으로 속성값은 테두리 두께를 의미 margin : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역 (margin 속성값은 margin 영역의 두께) 여러 방향의 테두리 속성을 조금 더 간단하게 적용한다면 margin: 위아래, 좌우 ; margin: 위, 우, 아래, 좌; (시계방향) -top,-bottom .. 따로따로 입력하지말고 한꺼번에 테두리 속성을 부여할 수 있다. Collapsible margins 현상 만약 요소의 margin의 top과 bottom이 적용이 안된..

[HTML] 시맨틱 태그 (Semantic Tag) 첫 레이아웃 구성하기

시맨틱 태그 (Semantic Tag) : 브라우저와 개발자 모두에게 의미를 명확하게 전달할 수있는 태그(요소)이다. 예를들어 등의 Semantic Tag 태그는 태그만 보아도 내용을 명확하게 정의할 수 있지만, 과 같은 태그만 보고는 어떤 내용인지 전혀 알 수가 없는 것을 Non-Semantic Tag라고 한다. 시맨틱 태그를 왜 사용할까? 태그로 묶어서 코드를 입력해도 가능하지만, 각각의 태그의 의미를 한 번에 알아보기가 힘들기 때문에 코드의 가독성이 떨어진다. 반면에 Sematic Tag (시맨틱 태그) 를 사용함으로써, 탐색이 쉽고, 코드의 가독성을 높여준다. 구글 검색엔진은 태그를 기반으로 검색키워드의 우선순위를 판단하기 때문에 의미에 맞는 태그를 사용하는 것이 좋다. 시맨틱 태그를 어떻게 사용..

[CSS] background-image 가운데 정렬, 어둡기 조절

background 이미지 size 맞춤 설정 3종 세트 background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"); background-size: cover; background-position: center; marign과 padding margin : 요소의 바깥 여백 ex) margin: 20px -> 양방향으로 20px씩 띄어라 padding: 요소의 안쪽 여백 - 위에서 부터 시계방향으로 여백 지정가능 요소의 가운데 정렬방법 1) margin 으로 정렬하는 방법 ( 양쪽 여백이 같다 => 가운데 정렬 ) div의 size 를 조절해서 margin으로 정렬..