노마드 코더 - 코코아톡 클론코딩 연습

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Coding Archive

노마드 코더 - 코코아톡 클론코딩 연습 본문

🖥️ Clone Coding

노마드 코더 - 코코아톡 클론코딩 연습

코등어 2022. 4. 17. 02:20

CLONING TIME

01. Sign Up Screen part One

index는 대부분의 웹서버가 가장 먼저 읽는 파일 (이는 브라우저가 가진 디폴트 속성.)
'!'는 html 기본 서식을 빠르게 입력할 수 있는 단축키.
column이라는 이름은 매우 일반적이기 때문에 (다른 html 파일에서도 많이 사용되는 이름이기 때문에), 구분을 짓기 위해 '부모 요소__자식 요소'로 이름을 짓는다.
ex)
〈div id="status-bar"〉
〈div class = "status-bar__column"〉〈/div〉
〈/div〉
〈!--내용--〉은 주석을 다는 태그다. 주석은 브라우저에게 보이지 않고, 사용자만 볼 수 있는 일종의 메모이다. (개발자 도구로는 볼 수 있다. 구현되는 페이지에 드러나지 않을 뿐이다.)

+) 단축키 팁

해당 줄을 복붙 할 때는 shift + alt + 아래(or 위) 방향키 누르기
div class="name"은 div.name으로, div id="id"는 div#id 하면 자동완성
comment 처리는 작성 후 Ctrl + / 하면 되고,
여러 개를 동시에 만들고 싶으시면 *를 사용하면 된다.
ex. div를 10개 → div*10 하면 된다.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Welcome to Kokoa Talk</title>

</head>

<body>

<div class="status-bar">

<div class="status-bar__column">

<span>No Service</span>

<!--Td do: Wifi Icon-->

</div>

<div class="status-bar__column">

<span>18:43</span>

</div>

<div class="status-bar__column">

<span>110%</span>

<!--Battery Icon-->

<!--Lightning Icon-->

</div>

</div>

</body>

</html>

2. BEM (Block_Element--Modifier!)

block
block__element
block__element--modifier

내가 내 코드를 다시 볼 때, 남들이 내 코드를 찾아볼 때 이해에 도움을 준다.
BEM(Block Element Modifier)은 좀 더 쉽게 읽히는 CSS를 가지는 것이다.
CSS를 작성할 때 id였는지 class였는지 헷갈릴 때가 많다. → 때문에 element앞에 "온점(.)"을 붙인다.
BEM에서 문제가 하나 생긴다면, 그것은 class가 엄청 길어질 수 있다는 것이다.
BEM을 싫어하는 사람도 있으며, 그냥 id와 class를 섞어 쓰는 사람들도 있다.
두 가지 방법 모두 쓰이기 때문에, 본인이 더 맞는 방법을 사용하면 된다.

<https://nykim.work/15> BEM에 대해 한국어로 정리해놓은 블로그!

3. Font Awesome

아이콘을 추가하는 데에는 두 가지 옵션이 있다.

직접 아이콘을 구하는 방법 (직접 이미지를 만들고 추출하거나 svg파일을 이용→svg는 픽셀이 없는 이미지 파일 형식, 수학으로만 구성된 형식)
Heroicons, FontAwesome에서 가져오기

! FontAwesome에서 가져온 kit code 스크립트는 항상 마지막에 있어야 한다 ! body 태그를 닫기 직전 !

<script
      src="https://kit.fontawesome.com/6478f529f2.js"
      crossorigin="anonymous"
    ></script>

'i'는 icon의 줄임말.

<div class="screen-header__icons">
        <span><i class="fas fa-search fa-lg"></i></span>
        <span><i class="fas fa-music fa-lg"></i></span>
        <span><i class="fas fa-cog fa-lg"></i></span>
      </div>

4. Sign Up Screen part Two

각 메인 페이지에 보통 header가 있기 때문에 각각의 header들을 class로 구분 지어 주는 게 좋다.

<header class="screen-header">
      <h1 class="screen-header__title">Freinds</h1>
      <div class="screen-header__icons">
        <span><i class="fas fa-search fa-lg"></i></span>
        <span><i class="fas fa-music fa-lg"></i></span>
        <span><i class="fas fa-cog fa-lg"></i></span>
      </div>
    </header>

form에서 버튼을 추가하는 방법은 두 가지이다.

<input type=”submit”>
<button></button>

form에도 id를 붙여서 구분해주는 게 좋다.

링크는 많이 사용되기 때문에 구분하기 위한 클래스나 아이디를 일일이 만들기는 번거로워 form태그 안에 넣어둔다.

확실히 이론을 보다가 실전 연습을 해보니까 훨씬 흥미도가 올라갔다. 실제로 화면에 출력이 되는 모습을 보니 뿌듯함을 느끼면서 진행 중이다. 코드 하나를 입력할 때마다 아직 새롭고 익숙하지 않지만 점점 코딩을 실감한다고 해야 하나....? 할 때마다 부족함을 느끼지만 빨리 다음 진도를 나가고 싶어서 계속하게 된다...!

'🖥️ Clone Coding' 카테고리의 다른 글

노마드 코더 - 코코아톡 클론코딩 연습(6) (0)	2022.05.19
노마드 코더 - 코코아톡 클론코딩 연습(5) (0)	2022.04.23
노마드 코더 - 코코아톡 클론코딩 연습(4) (0)	2022.04.21
노마드 코더 - 코코아톡 클론코딩 연습(3) (0)	2022.04.19
노마드 코더 - 코코아톡 클론코딩 연습(2) (0)	2022.04.19

'🖥️ Clone Coding' Related Articles

Comments

Coding Archive

노마드 코더 - 코코아톡 클론코딩 연습 본문

노마드 코더 - 코코아톡 클론코딩 연습

01. Sign Up Screen part One

2. BEM (Block_Element--Modifier!)

3. Font Awesome

4. Sign Up Screen part Two

'🖥️ Clone Coding' 카테고리의 다른 글

티스토리툴바