오늘 내가 배운 것
1. HTML element
2. CSS
3. CSS 적용시키는 3가지 방법
4. CSS 선택자, 속성, 속성값
1. HTML element
웹사이트 브라우저를 구성을 확인하다 보면 address, section, article, aside 태그를 볼 수 있는데,
이 태그들이 다른 특별한 역할이 있다기 보단 시멘틱 구성 태그이다
어떤 부분이 무엇을 구성하고 있는지 쉽게 파악하기 위한 태그
큰 영역을 놓고 보자면 div와 같은 역할을 한다.
2. CSS
Cascading Style Sheets
HTML은 데이터를 구분해주는 정도까지만 역할을 한다. 그 데이터를 꾸며주고 모양을 만들어주는 역할은 CSS가 한다.
CSS는 단독으로 사용할 수 없고, HTML이랑 같이 사용해야 한다.
3. CSS를 적용시키는 3가지 방법
1. inline 스타일로 작성하기
html 파일에서 엘리멘트 옆에 style 속성을 이용하여 작성한다.
<div style="background: #ffffff;">
</div>
2. <style> 를 이용하여 작성하기
<head> 안에 <style> 태그를 이용하여 작성한다.
CSS문법을 사용해야 하며,
선택자 {
속성 : 속성값 ;
}
3. 외부파일을 이용하여 작성하기 ⭐️중요!!!⭐️
<head> 안에 <link> 태그를 이용하여 작성한다.
<link href=“” type=“text/css” rel=“stylesheet”>
/* " " 안에는 파일을 경로로 작성하여 준다 */
1번에 방법의 비해 2번, 3번을 많이 쓰는 이유는 선택자를 이용하여 따로 작성하였기 때문에 inline 스타일에 비해 파악하기 쉽고, 관리하기 쉽기 때문이다. 제일 많이 쓰는 방법은 3번 (외부 파일을 이용하여 작성하기) 이다.
3번을 사용하면서 코드를 작성하기 전 제일 중요한 작업이 있는데, 외부파일이 제대로 적용되는지 확인하는 과정이 중요하다.
html-body 와 CSS 파일에 직접 간단한 코드를 작성하여 확인하는 방법도 있지만
라이브 서버, 저장된 html 파일을 열어 개발자도구(검사) 의 Network 탭을 이용해서 확인하는 방법이 있다.
하단의 html 파일과 css파일에서 css파일이 빨간색이 아니면 제대로 연결됐다는 뜻이다.
(사실 연결이 안 되면 빨간색 + Status에 404 코드를 보고 파악하는 것이지만 상태 코드에 대해서는 나중에 다시 배울 예정이다.)
4. CSS 선택자, 속성, 속성값
선택자란 ?
말 그대로 선택을 해주는 요소, CSS 규칙을 적용할 요소를 뜻한다.
선택자는 크게 기본 선택자, 그룹 선택자, 결합자 등이 있다.
(안에 내용도 정말 많지만 기본적인 부분만 기록함)
/*기본 문법*/
선택자 {
속성 : 속성값 ;
}속성과 속성값은 {} 중괄호 안에 여러 번 쓸 수 있고, ; (세미콜론) 을 이용하여 문장을 마무리 지어준다.
기본 선택자에선 전체 선택자 * , 유형 선택자는 element_name , 클래스 선택자 .을 이용하여 .class_name, id선택자는 #을 이용하여 #id_name 를 사용하고
그룹 선택자는 ,를 이용하여 A,B 그룹을 생성
복합 선택자 중 > 결합자를 이용해서 선택하는 자식 결합자는 A > B 처럼 사용한다.
(이외에도 많은 것이 있지만 필요하면 찾아 쓰자)
선택자는 기호를 뜻한다는 것이 아니라 적용할 요소를 말하는 것이다.
/* 전체 선택자 */
*{
margin: 0;
padding: 0;
}
/* 유형선택자 */
p {
background: #fff;
}
/* ID 선택자 */
#header {
background: #fff;
}
/* class 선택자 */
.title{
background: #fff;
}
/* 그룹 선택자 */
ul, li{
background: #fff;
}
/* 자식 결합자 */
#header > p {
background: #fff;
}** id 와 class **
id를 중복해서 쓰더라도 웹사이트를 구현하는 데 문제는 없지만 1번만 쓰는 것으로 약속되어 있다.
class는 공통적인 내용이 있을 때 사용할 수 있으며, 한 행에 여러 번 쓸 수 있다.
**margin 과 padding**
margin은 border(테두리) 영역 밖으로, padding은 border(테두리)영역 안으로 이동할 때 사용한다.
padding을 사용하면 padding 값만큼 컨텐츠 영역이 늘어나 블럭의 사이즈가 달라져서 오류가 생긴다. padding 값에 맞춰서 블럭의 사이즈를 빼줘야 하지만 padding 을 사용하면서 내가 원하는 블럭사이즈를 고정하기 위해서 box-sizing : border-box; 속성을 사용하면 원하는 레이아웃을 유지한 상태로 padding값을 넣어 줄 수 있다.
**inline 형태**
display : inline 상태에서는 width, hieght, margin, padding 이 적용되지 않는다.
그래서 inline 상태이면서 width, hieght, margin, padding을 적용시키기 위해선
display : inline-block 상태로 바꾸고 작업을 해야 한다
**ul 과 li**
코드 가독성을 위해서 ul 안에 li 외에 다른 태그를 쓰지 않는다. 2가지 이상 써야 할 경우 div로 한번 더 묶어서 쓰는 것이 좋다.
(필수가 아닌 깔끔한 코드 작성을 위한 룰)
**button**
버튼은 기본적으로 테두리 속성이 있다. 내가 원하는 디자인이 있는 경우 기존에 있는 버튼의 속성들을 지워 줄 필요가 있는데,
button{
background:none;
border:none;
}위와 같은 방법으로 테두리, 배경색을 지울 수 있다.
아쉬운 점 :
1. 처음에 레이아웃을 짤 때 input 안에 블록을 더 세분화해서 넣었어야 했는데, 세분화하지 못해서 위치를 세세하게 이동시킬 수 없었다. 조금 진행된 상태에서 파악을 한 부분이라 코드 전체를 뒤집진 못 했지만 다음에 시간 내서 세세하게 더 나누어 배치해봐야겠다.
2. 시멘틱 구조를 이용한 h1~h6 태그를 활용하지 못했다.
모양을 구현하는 것은 어떻게든 할 수 있지만 많은 이용자가 더욱 편리하게 사용해야 되는 상황에선 시멘틱 구조 코드를 짜는 것이 좋은데 다음에 만들 땐 잊지 말고 써야겠다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./public/css/join.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="contents">
<div id="join">
<ul>
<li>
아이디
<div class="title">
<input class="input" placeholder="@naver.com" />
</div>
</li>
<li>
비밀번호
<div class="title">
<input type="password" class="input"/>
</div>
</li>
<li>
비밀번호 재확인
<div class="title">
<input type="password" class="input"/>
</div>
</li>
</ul>
</div>
<div id="join2">
<ul>
<li>
이름
<div class="title">
<input class="input"/>
</div>
</li>
<li>
생년월일
<div class="title">
<input class="input2" placeholder="년(4자)"/>
<select id="month" class="input2">
<option>월</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<input class="input2" placeholder="일" />
</div>
</li>
<li>
성별
<div class="title">
<select aria-label="성별" class="input">
<option>성별</option>
<option>남자</option>
<option>여자</option>
<option>선택 안함</option>
</select>
</div>
</li>
<li>
본인 확인 이메일
<div class="title">
<input class="input" aria-label="선택 입력"/>
</div>
</li>
</ul>
</div>
<div id="join3">
<ul>
<li>
휴대전화
<div class="title">
<select class="input">
<option>대한민국 +82</option>
</select>
</div>
</li>
<li>
<div class="number" class="size" >
<input class="input3" placeholder="전화번호 입력" />
</div>
<button class="button" class="size">인증번호 받기</button>
</li>
<li>
<div class="size">
<input class="input" placeholder="인증번호 입력하세요"/>
</div>
</li>
</ul>
<div id="join_bt">
<button id="button">
가입하기
</button>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>CSS
*{
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221025 HTML/CSS 를 이용한 애니메이션 효과-학원 홈페이지 클론코딩 (0) | 2022.10.25 |
|---|---|
| 221022 네이버 회원가입 클론코딩 (0) | 2022.10.23 |
| 221020 브라우저와 HTML (0) | 2022.10.20 |
| 221017 페어코딩 (0) | 2022.10.17 |
| 221015~221016 클론코딩 - 학원 홈페이지 만들기 (1) | 2022.10.17 |
댓글