본문 바로가기

728x90

Web 개발

(14)
[HTML/CSS] 6. 단위와 위치 절대 단위 : 고정된 값을 출력 (출력장치의 물리적 속성을 아는 경우 효율적) → in, cm, mm, pt, pc 상대 단위 : 다른 요소의 크기에 영향을 받아 크기가 변함 (호환성을 유지하는데 유리) → em, ex, px, % 자주 사용하는 상대 단위 em : font_size, 해당 폰트의 대문자 M의 너비를 기준으로 함 ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함 px : pixel, 출력장치에 따라 상대적인 크기를 가짐 % : percent, 기본 글꼴의 크기에 대하여 상대적인 값을 가짐 위치 지정하기 1. static 모든 요소의 default 값이다. 포지션 속성을 따로 설정하지 않았을 때 자동으로 적용되는 것 가장 위쪽, 왼쪽에 배치된다. 2. relative ..
[HTML/CSS] 5. 클래스 , 패딩과 마진 클래스 (class) css에 디자인 속성을 일일히 지정해 줘야 하는데 이런 귀찮음을 해소할 수 있는게 바로 '클래스' 선택자이다. class의 이름을 지정해줘야 한다. class 이름을 'lighter' 라고 하겠다. #html 코드 볼드체 #css 파일에서 클래스를 불러올 떄는 '.클래스명' 으로 입력 .light{ font-weight: lighter; } html에 bold 클래스 이름을 붙이고, css에서 위와 같이 실행하면 모든 bold 클래스가 두꺼운 볼드체로 적용된다. 패딩(padding)과 마진(margin) 패딩과 마진은 웹 페이지에서 여백으로 사용되는 요소이다. 패딩(padding) : 속을 넣다, 채워 넣다 마진(margin) : 여백, 여유' 파란색 부분이 콘텐츠, 초록색 부분이 ..
[HTML/CSS] 4. css css란 웹 문서의 스타일 시트이다. html에서 웹에 관한 내용을 구성한다면, css는 디자인 역할을 맡고 있다. 폰트, 글씨 크기, 색, 도형, 정렬 등등 웹 페이지의 내용을 제외한 모든 디자인 부분 1. Inline Style Sheet 첫 번째는 html 태그의 속성에 css코드를 넣는 방법이다. 고양이는 귀여워 이라는 태그 안에 속성 값을 만들어 글씨에는 검은색, 배경에는 연두색을 적용하였다. 디자인 요소를 태그마다 하나하나 지정해 줘야 하기 때문에 한계가 있으며 재사용이 불가능하다. 2. Internal Style Sheet 두 번째는 안에 안에 css코드를 넣는 방법이다. 고양이는 귀여워 html 문서 안에 태그를 넣어 디자인을 적용했다. ( 태그는 보통 사이에 넣지만 어디에 넣어도 상관없다..
[HTML/CSS] 3. 중요태그 정리 자주 쓰이는 태그 1. 문장을 나누는 태그 1) 태그 (paragraph) : 문단을 지정하는 기능 2) 태그 (line break) : 줄을 바꾸는 기능 #코드 강아지 정보 1.사람을 잘 따른다. 2.산책을 좋아한다. 3.너무 귀엽다. 고양이 정보 1.자기 맘대로 한다. 2.사람에게 순종적이지 않다. 3.매우 귀엽다 #출력결과 라는 태그를 쓰니 두 줄 사이에 공백을 두고 문단이 구분된다. #코드 강아지 정보 1.사람을 잘 따른다. 2.산책을 좋아한다. 3.너무 귀엽다. 고양이 정보 1.자기 맘대로 한다. 2.사람에게 순종적이지 않다. 3.매우 귀엽다 #출력결과 2. 범위를 나누는 태그 1) 태그 (division) : 영역을 나누는 기능 (한 페이지 내에서 영역을 지정해줌) 2) /a> 형식으로 작성된..
[HTML/CSS] 2. HTML의 기본 구조 ◆ HTML로 텍스트 출력하기 네이버 창에 들어간 후 f12를 눌러본다. 빨간색 박스를 보면 Elements와 Styles라는 단어가 보인다, Elements는 html, Styles는 css 파트이다. 왼쪽 위에 있는 마우스 모양의 아이콘을 클릭한 후 마우스를 가져다 놓으면 연두색과 하늘색으로 이루어진 박스 모양이 나타난다. input이라는 보라색 글자가 나타난다. input은 사용자로부터 정보를 받아들이는 태그이다. 우리가 네이버 검색창에 검색할 수 있는 이유가 input이라는 태그 덕분이다. ◆ HTML로 텍스트 출력하기
[HTML/CSS] 1. HTML과 CSS html/css에서는 에디터로 visual studio code, 웹 브라우저로 chrome을 사용했습니다. ◆ HTML html은 웹을 이루는 가장 기초적인 구성요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다. 웹 언어에는 다양한 종류가 있지만 대부분의 웹 페이지들은 html로 작성된다. html은 웹사이트 안의 텍스트를 어떻게 배치할 것인지, 하이퍼링크를 첨부할 것인지 등등 명령을 내려주는 역할을 한다. 명령을 이행하기 위해서는 명령어가 필요한데 이 때 사용하는 것이 태그(tag)이다. html요소는 '태그'를 사용해서 문서의 다른 텍스트와 구분한다. 태그는 ''로 이루어진다. 시작과 끝을 표시하는 쌍을 이루고 있다는게 특징이다. 위의 태그는 html 문서를 시작하고 끝낸다는 의미이다. 사이에..

728x90