Dreams come true

[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으로 정렬..

[CSS] Block과 Inline의 특징

CSS 에서 중요한 요소인 block 과 inline 에 대하여 알아보자 ! ***** block 레벨 요소 항상 새로운 라인으로 시작한다. 한 라인을 길게 전부 차지한다. -> 옆에 다른 요소가 오지못한다. width, height, margin, border, padding 속성 지정이 가능하다. block 레벨 요소 안에(하위 태그) inline 요소를 사용할 수 있다. 대표적인 태그로 div가 있다. (h1 ~ h6, p , title ...) 대부분의 태그는 block이다. inline 레벨 요소 옆에 다른 요소가 올 수 있다. 요소의 너비만큼 가로폭을 차지한다. -> 요소안에 내용물이 없다면 화면에 보여지지 않는다. width, height 속성을 지정할 수 없다. inline 요소안에 blo..

[HTML] form 태그에 대하여

: 사용자가 입력한 데이터를 서버에 전송시키기 위해서 사용하는 태그이다. - form의 속성 action : form태그 안의 내용을 처리해주는 서버쪽 파일을 지정한다. name : form의 이름으로, 한 문서 안에 여러개의 form태그가 있을 경우 구분해준다. method : form을 서버에 전송할 http 메서드를 지정한다. method 는 get과 post로 구분할 수 있다. > get : url에 입력 데이터를 쿼리스트링으로 보내는 방식으로, 전송되는 데이터가 보이기 때문에 보안에 취약하고, 크기에 제한이 있다. 만약 사용자가 웹페이지에서 로그인을 한다면? 사용자의 Id,pw 번호가 url에 보여짐 (파일의 경로가 같으면 서버 없이 그 경로의 페이지를 보여줄 수 있다.) > post : req..

웹페이지의 기본 HTML이 무엇일까?

HTML ( Hypertext Markup Language ) : 웹페이지, 웹문서, document : 웹페이지가 어떻게 구조화되어 있는지 브라우저에게 알려준다. HTML 은 하나의 요소로 구성된 태그(' ')가 열고 닫히며 구성된다. 쉽게생각하면 이렇다.. htmt : 뼈대 css : 근육 javascript : 뇌 html 태그의 구성 태그 : 로 묶인 명령어이다. 시작태그 종료태그 한쌍으로 구성된다. (시작태그만 사용하는 태그도 있다.) 요소 : 태그로 이루어진 모든 명령어 속성 : 태그에 사용되는 추가 정보 속성값 : 속성에 부여되는 값 "" 또는 ''를 사용한다. 태그는 대소문자를 구분하지않지만 관용적으로 소문자를 사용하며 html 폴더나 파일명은 반드시 소문자로 사용..