HTML - 구조 (뼈대)
CSS - 스타일 (페꾸)
JS - 상호작용 (Java Script). Node.js를 활용하여 서버 제작, 앱 / 프로그램 제작 가능
[HTML]
HyperText Markup Language. 웹 페이지를 구성하는 마크업 언어. 전체적인 구조 담당
tag<>들의 집합. 트리 구조(부모 노드와 자식 노드로 구성)
HyperText Markup Language. 웹 페이지를 구성하는 마크업 언어. 전체적인 구조 담당
tag<>들의 집합. 트리 구조(부모 노드와 자식 노드로 구성)
<div> 로 열면(opening tag) </div>로 닫는다(closing tag) ```
오프닝/클로징 태그 사이 콘텐츠를 넣어서 구조를 표현
<p class="paragragh"> This is a paragragh. </p>
위의 코드에서 class는 속성 이름(attribute name) "paragraph"는 속성 값(attribute value)
자주 사용되는 html 요소
<div> /* 줄 바꾸기 */
<br/>
<span>
<img> /* 닫는 캐그 없음 */
<ul> & <li>
<ol>
<input> /* text, radio, checkbox */
<textarea>
<button>
<tag>
<a>
<script>
<p>
<section>
<h1>
<br>
<nav>
etc...빈 태그 - 시작과 종료 1 쌍으로 이루어지지 않은 태그
<br>, <img src="">, <input type="">w3schools.com에서 실습 가능
아래는 동기분이 알려주신 비전공자를 위한 html/css 부스트코스 강의
https://www.boostcourse.org/cs120/joinLectures/33586
[CSS]
html으로 작성된 웹 애플리케이션 구조에 디자인을 적용하는데 사용
사용자 인터페이스 (User Interface - UI) 구축
좋은 사용자 경험(User Experience) 고려하여 직관적이고 편리하게 디자인 하여야
body {
color:red;
font-size:30px;
}셀렉터 {선언 블록(중괄호) 안에 속성명과 속성값을 사용하여 속성을 변경 가능
ex. 셀렉터 {속성명1 : 속성값1; 속성명2 : 속성값2; ... }
속성과 값을 작성한 다음에는 세미콜론을 붙여 각 속성의 내용을 구분한다
html 파일과 css 파일 작성 후 html 파일 내 link 태그에서 href 사용해 파일을 연결한다.
<link rel="stylesheet" href="index.css" />flex 속성은 페이지 레이아웃 학습시 다시 공부
layout.css 파일에 스타일 작성 -> 이후 index.html 파일에 link 태그에서 href 사용해 파일 연결
관심사 분리 : html은 웹 페이지의 구조와 내용만 담당. css는 디자인만 담당
Tip) h4의 색상 바꿀 때 index.html 파일에서 h4에 id 할당해 준다
<h4 id="navigation-title"> test </h4>그 후 layout.css 파일에서 id 있는 요소 선택시 #기호 사용하여 색상 부여 (#id명)
#navigation-title {
color: red;
}id는 문서 내 하나의 요소에만 적용 가능. 중복 불가
tip2) 여러 요소에 같은 스타일링 적용시 class 사용
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>이후 layout.css 파일에서 스타일 적용 (.클래스명 사용)
.menu-item {
text-decoration: underline;
}
텍스트 꾸미기 (HEX 16진수 RGB)
color: #000000; 글자 색상
background-color: #000000; 배경 색상
border-color: #000000; 테두리 색상
font-family: "폰트", "임시폰트1", "임시폰트2" 폰트 설정 (폰트 없는 경우 임시폰트가 대신 보여짐)
font-size: 24px 폰트 사이즈 (절대적인 크기(인쇄시 적합) - 픽셀 사용. 상대적인 크기 - rem)
font-weigh 굵기
text-decoration 밑줄, 가로줄 등
letter-spacing 자간
line-height 행간
text-align 정렬 (left, right, center, justify 양쪽 정렬)
박스 꾸미기
줄바꿈 O (Block) vs 옆으로 붙는 박스 (inline, inline-block)
크롬 브라우저 내 개발자 도구를 통해 박스의 유형 확인 가능 - Cmd + Opt + i (맥북) 또는 f12 (윈도우)
block - div, p
inline - span
박스는 margin(바깥 여백) - border(테두리) - padding(안쪽 여백) - content 순
border-width(테두리 두께) border-style(테두리 스타일) border-color(테두리 색상) 등등 border-style mdn 구글 검색해보기
margin: @px, @px, @px, @px; (top, right, bottom, left 시계방향)
padding: @px, @px, @px, @px; (top, right, bottom, left 시계방향)
하나의 값만 줄 경우 네 방향 모두 설정, 두 값 줄 경우 top, bottom 이 첫번째 값, right, left가 두번째 값
박스 벗어나는 컨텐츠
박스 크기보다 컨텐츠 크기가 더 큰 경우 컨텐츠가 박스 빠져나올 경우 박스 안에 스크롤 추가 가능
overflow: auto; (자동으로 스크롤)
overflow-x, overflow-y 속성으로 두 방향 모두 지정 가능
overflow: hidden (넘치는 컨텐츠 보이지 않기)
레이아웃 디자인 할 때 박스에 적용할 여백 고려하여 박스 크기 디자인! (border-box 계산법 기준)
* {
box-sizing: border-box;
}