Fast Campus - F.E 3기 html, css(1)

: )·2022년 9월 16일
MegabyteSchool개발자취업부트캠프국비지원교육내일배움카드메가바이트스쿨패스트캠퍼스

안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 html, css 1편입니다.

html?

웹 페이지를 구성하는 뼈대, 골조같은 역할입니다.
html은 웹사이트의 구조를 잡아줍니다.

html 핵심 요소정리

inline요소는 글자, block요소는 상자
이렇게 생각하면 편해요!

<div></div>

division의 약자로, 아무 의미가 없습니다.
흥청망청 막 써도 되요.
특정 내용들을 묶어서 구분지을 때 필요합니다.
중구난방 등장하는 태그라 해요.
block요소입니다.

<h1></h1>
    .
    .
    .
    .
    .
<h6></h6>

heading의 약자입니다.
제목을 의미하며, 총 6개로 나뉩니다.
1번부터 차례대로 써야 합니다.
숫자가 작을수록 중요도가 높아요.
페이지 전체에서 중요도를 파악해 h1부터 h6까지 할당하세요.
block요소입니다.

<p></p>

문장을 구별하는 태그입니다.
pharagraph의 약자입니다.
block요소입니다.

<img src="" alt="" />

image의 약자이며, 이미지 삽입 태그입니다.
대표적인 inline요소입니다.
source의 약자인 src에 이미지의 경로를
이미지가 노출되지 않을 때 노출될 대체 텍스트는 alt에 입력합니다.
src, alt는 입력 필수 요소이므로, 반드시 입력합니다.

<ul>
  <li>사과</li>
  <li>딸기</li>
</ul>

unordered list인 ul, list item의 약자인 li입니다.
li는 ul의 자식요소입니다.
li의 태그는 무조건 1개 이상 있어야 합니다.
또한, li는 무조건 ul로 감싸져 있어야 합니다.
세트에요.
ul은 순서가 필요없는 목록의 집합이며,
li는 그 ul목록 내 각 항목입니다.
둘 다 block요소입니다.

(참고)
ul>li*4
를 입력하면?

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

이렇게 완성됩니다!

<a href="http://www.naver.com">NAVER</a>
<a href="http://www.google.com" target="_blank">Google</a>

Anchor의 약자인 a 태그입니다.
타 홈페이지를 하이퍼링크로 연결시켜 줍니다.
href에 명확하게 주소를 명시해야합니다.
target을 통해 같은 탭에서 표시할지,
새로운 탭을 통해 표시할지 정해줍니다.
inline요소입니다.

<span>파인</span>애플

특별한 의미가 없는, 구분용도의 inline요소입니다.
span 태그를 이용해 css로 꾸며줄 수 있습니다.

동해물과 백두산이</br>마르고 닳도록</br>하느님이 보우하사</br>우리나라만세

줄바꿈 태그입니다.
위 예시는 실제로
동해물과 백두산이
마르고 닳도록
이라고 표시됩니다.
inline요소입니다.

<input type="text" value="01012345678" />
<input type="text" placeholder="-을 제외하고 입력하세요." />
<input type="text" disabled />

데이터를 입력하는 태그입니다.
inline-block요소입니다.
즉, inline요소이지만 block요소의 몇 가지 특성을 사용할 수 있습니다.
inline요소 특유의 수평으로 쌓이는 모습을 보여주지만,
가로와 세로 크기 지정도 가능하며, 여백 지정도 가능한
block요소의 특징도 보여줍니다.
type속성에 사용자가 입력할 데이터의 타입을 입력합니다.
value속성은 사용자가 데이터를 입력 전 우리가 미리 입력해서 표시해두는 데이터입니다. 물론, 사용자는 수정이 가능하죠.
placeholder속성은 사용자가 입력할 데이터에 힌트를 제공합니다.
disabled속성은 화면에는 보이지만, 입력은 불가능하게 하는 비활성화요소입니다.
아래 예시의 checkbox속성은 사용자가 체크를 할 수 있게 하는 요소입니다.

<label>
  <input type="checkbox" /> 사과
</label>
<label>
  <input type="checkbox" /> 파인애쁠
</label>
<label>
  <input type="checkbox" checked /> 버네너
</label>

라벨링이 가능한 요소(예시에서는 input)의 제목을 명시할 때 사용하는 속성입니다. inline요소입니다.
label 태그로 input 태그와 사과 텍스트를 묶어줬기 때문에, 사용자는 체크박스 바깥의 사과 텍스트를 클릭해도 체크박스에 체킹됩니다.
checked 속성은 사용자가 선택 전 미리 체크해 보여주는 요소입니다.

<label>
  <input type="radio" name="fruits" /> 사과
</label>
<label>
  <input type="radio" name="fruits" /> 버네너
</label>

radio 속성을 입력할 시, 사용자는 여러 선택지 중 한 선택지만 고를 수 있습니다.
checkbox와 별개의 요소입니다.
radio는 name으로 그룹을 지어줘야 합니다.
예시에서는 사과와 버네너가 같은 name을 사용하고 있으므로, 사과 혹은 버네너 중 택 1 입니다.

<table>
  <tr>
    <td>가</td><td>나</td>
  </tr>
  <tr>
    <td>다</td><td>라</td>
  </tr>
</table>

table 태그는 테이블 요소입니다.(?)
table 태그는 작성할 때 행, 가로(tr)가 무조건 먼저 나와야 합니다.
tr의 자식요소인 td는 하나의 칸을 만들 수 있습니다.


<!--애국가--!>
<p>
  동해물과 백두산이 마르고 닳도록
  하느님이 보우하사 우리나라 만세
</p>

주석입니다.
웹 상에는 표시되지 않고, 나 혹은 동료 혹은 개발자만 확인할 수 있도록 해줘요.
주석처리 하고 싶은 부분에
이렇게 해주시면 됩니다.
혹은 주석처리 하고 싶은 부분에 커서를 두고
cmd + /를 입력해주시면 바로 완성됩니다.
저는 앞으로 보내주긴 아깝고 출력하긴 뭐한 코드들은 저렇게 주석처리 해볼까 해요.


지금부터는 전역 속성을 알아보겠습니다.

<태그 title="설명">설명할 객체</태그>

첫번째는 title 속성입니다.
해당 객체의 정보나 설명을 지정해줍니다.
예시를 들어볼게요.

<a href="http://www.google.com" title="구글로 떠납니다">google</a>

위 코드를 입력하고 출력하면

이렇게 나오는데요.
저 구글 글자위에 마우스를 얹어볼게요.

아까 적어둔 "구글로 떠납니다"라는 텍스트가 등장하네요.
해당 객체를 짧게 설명하기 좋아 보이네요.

<태그 style="설명">설명할 객체</태그>

다음으로 알아볼 태그는 style 속성입니다.
요소에 적용할 스타일, 즉 css를 지정해줍니다.
(미리 참고)
css는 총 4개의 선언 방식이 있습니다.
1. head부분에 link를 이용한 선언 방식
2. style 태그를 통한 선언 방식
3. <태그 style></태그>를 이용한 선언 방식
4. To be continued..

<태그 class="설명">설명할 객체</태그>

요소를 지칭하는 이름을 지어줍니다.
여기서 중요한 점은
이 태그는 중복 이름을 사용할 수 있습니다.
나중에 css로 입맛에 맞는 요소를 골라서 꾸며주면 되겠네요.
예시를 볼게요.

<p>
  이 제품은 무려 100만명이 구매한 제품입니다!
</p>

이렇게 출력하면 강조하고 싶은 부분도 그냥 일괄적으로 출력되겠죠?
전 100만명을 강조하고 싶습니다.

<p>
  이 제품은 무려 <span>100만명</span>이 구매한 제품입니다!
</p>

그래서 span 속성을 넣었는데, 생각해보니 앞으로 너무 많이 쓸 예정이에요.
그래서 방금 배운 class 속성을 넣어주겠습니다.

<p>
  이 제품은 무려 <span class="wow">100만명</span>이 구매한 제품입니다!
</p>

그리고 아직 배우진 않았지만
약간의 css를 끼얹어볼게요.

body {
  font-size: 16px;
}
.wow {
  color: black;
  font-size: 30px;
}

.(class)는
(class)의 값을 아래 내용으로 꾸며줘!
라고 합니다.
전 css를 모르니 강조는 저 정도로 만족하려 해요.
그래도 저 정도면 잘 강조될거라 생각합니다.
출력해보죠.

제가 원하는 결과물이 출력되었습니다.

<태그 id="설명">설명할 객체</태그>

다음에 살펴볼 요소는 id입니다.
class와 같은 용도이지만, 고유한 이름만 사용 가능합니다.
고유값이라 자주 사용하진 않지만, 아주 중요한 부분을 지정해줄 땐 효과적이라고 해요.

<p>
  이 제품은 무려 <span class="wow">100만명</span>이 구매한 제품입니다!
</p>

아까 그 예시에서, 무려를 또 강조해보고 싶습니다.
그런데, 100만명과는 다르게 강조하고 싶네요.
그래서 둘 다 id를 사용해 따로 강조해보겠습니다.

<p>
  이 제품은 <span id="whop">무려</span> <span id="wow">100만명</span>이 구매한 제품입니다!
</p>

class에서 id로 바뀌었으니, css도 수정이 들어가야겠네요.

body {
  font-size: 16px;
}
#whop {
  color: orange;
  font-size: 20px;
}
#wow {
  color: black;
  font-size: 30px;
}

class는 .을 붙였었죠?
id는 #을 붙여줘야 합니다.
이제 어떻게 출력되는지 볼게요.

굳 :)

<태그 data-이름="데이터"></태그>

다음은 data요소입니다.
이름 부분에는 제가 원하는 이름을 넣고
뒤에 데이터는 텍스트를 의미합니다.
무슨소린지 모르겠으니 예시를 보죠.

<div data-food-name="soju">소주</div>
<div data-food-name="meet">삼겹살</div>

전 소주와 삼겹살에 food-name이라는 이름을 붙여주었고,
그들의 데이터는 각각 soju와 meet로 구별했습니다.
이 내용을 javascript를 통해 확인해볼까요?

const els = document.querySelectorAll('div')
els.forEach(el => {
  console.log(el.dataset.foodName)
})

위 자바스크립트 코드를 해석하면

const라는 그릇을 만들고
그 그릇의 이름은 elements의 약자인 els이고
내가 작성한 html 구조에서 (document.)
querySelector를 통해
모든 요소를 찾을 것이고 (All)
내가 찾으려고 하는 요소는 div이다. ('div')

그리고 찾아서 그릇에 담긴 요소들을 (els.)
하나씩 반복해 가면서 데이터를 처리할거고 (forEach)
그 반복되는 각각의 내용은 별도의 그릇에 담아서 (el => )
내부에서 사용하겠습니다.

까지가 const els = document.querySelectorAll('div')
이후엔

그 각각의 그릇에 담긴 (el)
데이터를 추출하는 dataset에서
아까 html에 저장해둔 food-name을
(javascript에서는 하이픈(-)을 사용할 수 없습니다.
그래서 foodName으로 작성해야 해요.)
console로 출력할거고, log로 기록을 남기겠습니다.

라는 해석이라고 해요.
결과나 봐요.

콘솔 부분에 아무 내용이 없어요.
이게 왜 이러는지 혼자 계속 고민했는데
결론은
html의 head 영역에 scrip로 javascript를 연결하잖아요?
그런데 저 div 내용은 body부분에 있기 때문에
해석이 안된 상태로 뜨는거라고 합니다.
해결 방법!

<script defer src="./main.js"></script>

script 뒤에 defer를 붙여줍니다.
defer 속성을 붙여주면 html 전체를 확인 후 javascript를 적용한다고 해요.
이제 결과를 볼게요.

이제 정상적으로 출력되네요.

css?

구조가 완성되었으니, 꾸며줍니다.
페인트 칠도 해주고, 마루도 깔아주고, 전등도 달아주고...

선택자 { 속성: 값; 속성: 값; }

기본 문법입니다.
시작은 {
끝은 } 입니다.

속성은 css의 종류를 의미하고,
값은 css의 값을 뜻합니다.
그런데 저 속성과 값이 많아지면 해석하기 힘들어질 것 같습니다.
정리해볼게요.

선택자 {
  속성: 값;
  속성: 값;
}

이렇게 한 줄에 한가지의 속성, 값을 정리하겠습니다.
css에도 주석은 존재합니다.

/* 주우석 */
선택자 {
  속성: 값;
  속성: 값;
}

/와 /로 지정할 수 있고,
단축기는 cmd + /입니다.

css 선언요소

css 선언요소는 총 4자라는 점을 언급했었는데요.

  1. 내장방식
  2. 인라인방식
  3. 링크방식
  4. @import방식

1. 내장방식

html 내부 body 부분에 직접 작성합니다.

<style>
  div {
    color: blue;
    background-color: black;
    margin: 30px;
  }
</style>

일반적으로 코딩할 땐 자주 쓰이지 않고, 나중에 프로젝트를 번들 과정에서 사용합니다.

2. 인라인방식

요소에 style속성에 직접 작성합니다.

<div style="color: blue; background-color: black; margin: 30px;"></div>

편리해보이지만,
이 방식은 지나치게 우선되는 문제가 있다고 합니다.
유지보수에도 안좋다고 해요.
역시 권장되는 방식이 아니에요.

3. 링크방식

<!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <link rel="stylesheet" href="./main.css">
  <script defer src="./main.js"></script>
</head>
<body>
<p>
  이 제품은 <span id="whop">무려</span> <span id="wow">100만명</span>이 구매한 제품입니다!
</p>
</body>
</html>

제가 계속 사용해온 익숙한 방식이 나왔어요.
외부에서 css 파일을 따로 작성해 불러오는 방식입니다.

body {
  font-size: 16px;
}
#whop {
  color: orange;
  font-size: 20px;
}
#wow {
  color: black;
  font-size: 30px;
}

그럼 위 내용의 css가 html과 연결되어 출력됩니다.
병렬방식이에요.

4. @import방식

링크방식과 비슷해보이지만, 다른 방식입니다.

<!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <link rel="stylesheet" href="./main.css">
  <script defer src="./main.js"></script>
</head>
<body>
<p>
  이 제품은 <span id="whop">무려</span> <span id="wow">100만명</span>이 구매한 제품입니다!
</p>
</body>
</html>

여기까지는 같아요.
하지만 외부 css에 변화가 생깁니다.

@import url(./box.css");

#whop {
  color: orange;
  font-size: 20px;
}
#wow {
  color: black;
  font-size: 30px;
}

맨 위의 저 내용이 뭘까요?
바로 main.css 파일 부근에 box.css라는 별도의 css파일을 불러오라는 뜻입니다.

body {
  font-size: 16px;
}

그 박스에는 이런 코드가 들어있네요.
즉, 이 방식은 직렬방식입니다.
html에서 바로 css 두개를 불러오지 않고, 연결-연결-연결 개념이죠.
자주 쓰이진 않는다고 합니다.

css 선택자

css 선택자는 총 5개 입니다.

  1. 기본
  2. 복합
  3. 가상 클래스
  4. 가상 요소
  5. 속성

1. 기본 선택자

1-1. 전체선택자 ( * )

모든 요소를 선택합니다.
해당 css 내용을 html 전체에 적용시켜줍니다.

1-2. 태그 선택자 (ABC)

태그에 이름이 ABC인 요소를 선택합니다.
별 다른 기호 없이
li {
div {
이런 식으로 시작합니다.

1-3. 클래스 선택자 (.ABC)

html class 속성의 값이 ABC인 요소를 선택합니다.

1-4. 아이디 선택자 (#ABC)

html id 속성의 값이 ABC인 요소를 선택합니다.

2. 복합 선택자

복합 선택자를 해석할 때는 뒤에서부터 해석하면 조금 편할 수 있습니다!!

2-1. 일치 선택자 (ABCXYZ)

선택자 ABC와 XYZ, 두 가지를 동시에 만족하는 요소를 선택합니다.
예시를 볼게요.

  <div>
    <ul>
      <li>사과</li>
      <li>수박</li>
      <li class="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
  </div>

이 내용으로 일치 선택자를 작성해볼게요.

span.orange {
  color: red;
}

span이라는 일반 선택자와 .orange라는 클래스 선택자 2개가 동시에 선택되었습니다.
즉, 저 html에 span과 .orange 둘 다 확인이 되어야 저 css는 발동하는거죠.
단, 일반 선택자는 별도의 기호가 없습니다.
그래서 .orangespan이라고 입력하면 브라우저는 orangespan이라는 클래스를 찾고 있을거에요.
그러므로, 일치 선택자 내부에 일반 선택자를 작성해야 할 경우 일반 선택자를 맨 앞에 작성해야 합니다.

2-2. 자식 선택자 (ABC>XYZ)

선택자 ABC의 자식요소 XYZ를 선택합니다.

  <div>
    <ul>
      <li>사과</li>
      <li>수박</li>
      <li class="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
  </div>

똑같은 html에 적용시켜보겠습니다.

ul > .orange {
  color: red;
}

이렇게 작성하면 ul태그의 자식요소 중에서 orange의 값을 찾아내고
거기에 해당하는 글자만 붉게 변하겠죠?
이 선택자는 서로 부모와 자식 관계의 요소일 때만 적용됩니다!

2-3. 하위(후손) 선택자 (ABC XYZ)

선택자 ABC의 후손 XYZ를 선택합니다.
사이에 띄어쓰기가 있다면 하위 선택자입니다.
그리고, 자식 선택자와 다른 점은 꼭 부모와 자식 관계의 요소가 아니어도 된다는 차이점이 있습니다.

  <div>
    <ul>
      <li>사과</li>
      <li>수박</li>
      <li class="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
  </div>
  <span class="orange">오렌지</span>

앞선 예제에서 맨 마지막줄 코드 한 줄이 추가되었습니다.
여기서 후손 선택자를 적용시켜볼까요?

div .orange {
  color: red;
}

2-4. 인접 형제 선택자 (ABC+XYZ)

선택자 ABC의 다음 형제요소 XYZ 하나!!를 선택합니다.
즉, ABC와 XYZ는 서로 같은 부모를 둔 형제자매관계입니다.

<ul>
  <li>사과</li>
  <li class="orange'>오렌지</li>
  <li>망고</li>
  <li>키위</li>

여기에서 인접 형제 선택자를 적용시킬게요.

.orange + li {
  color: red;
}

li 태그를 찾고,
그 내부에서 class값이 orange인 값을 찾고,
그 값의 다음순서에 위치한 단 하나의 형제 값에 css가 적용됩니다.
화면에는 망고라는 글자가 빨갛게 나오겠죠?

2-5. 일반 형제 선택자 (ABC~XYZ)

선택자 ABC의 다음 형제요소 XYZ 모두!!를 선택합니다.
바로 예시를 볼게요.

<ul>
  <li>사과</li>
  <li class="orange'>오렌지</li>
  <li>망고</li>
  <li>키위</li>

이제는 일반 형제 선택자를 적용시킬게요.

.orange ~ li {
  color: red;
}

li 태그를 찾고,
그 내부에서 class값이 orange인 값을 찾고,
그 값의 다음순서에 위치한 모든 형제의 값에 css가 적용됩니다.
화면에는 망고와 키위가 모두 빨갛게 나오죠.
보통 일반형제보다는 인접형제가 더 자주 쓰인다고 합니다.

다음번에는 가상 클래스를 배워보도록 하겠습니다.

profile
: )
수제 에러코드 전문점 / 불량코드 원조 맛집
이전 포스트

Fast Campus - F.E 3기 javascript(1)

다음 포스트

Fast Campus - F.E 3기 javascript(2)

1개의 댓글

comment-user-thumbnail
hye-toria
2022년 9월 17일

👍👍👍

답글 달기