[스파르타 코딩클럽을 통해 코딩에 입문하기#3]
❗ 오늘 배운 것=CSS 기초, 자주 쓰이는 CSS, 폰트, 주석, 파일분리
◾ 용어
부모태그/자식 : 부모태그안에 자식이 속해있고, 부모태그에 꾸미기를 하면 자식도 꾸며짐
◾ CSS로 Body를 꾸밀 때
꾸미고 싶은 구역에 명찰을 달아주고, 그 명찰을 정확히 지정해서 꾸며준다.
◾ 어떤 특정 부분을 꾸미고 싶다
1. <DIV></DIV>로 꾸미고 싶은 구역을 설정한다.
2. 그 구역에 명찰을 달아준다, <Div Class="mytitle"> : Div 구역에 mytitle라는 명찰을 달았다.
3. 그 명찰의 대상을 꾸미고 싶기 때문에 <head>로 가서 <Style></Style>을 사용
4. 어떤 것을 꾸미고 싶은지 <Style>안에 지정이 되야 하므로 .mytitle {} : 온점은 지정해주는 역할
5. mytitle {} 안에 꾸미고 싶은 정보를 넣는다. (color, background, width, font-size 등등)◾ 여백의 개념
여백은 내 바깥으로의 여백(margin)과 내 안쪽으로의 여백(Padding)이 있다.
내가 원하는 것의 안쪽으로 넓어지고 싶다면 Padding을 쓰고 바깥쪽으로 넓어지고 싶다면 Margin을 쓴다.
가운데는 내 양옆 바깥쪽의 여백이 최대다 라고 이해하면 된다.
◾ html의 박스속성과 글속성
박스는 가로세로 개념이 있지만, 글은 가로세로 개념이 없다
그런고로, 글의 위치설정을 하고 싶다면 글을 박스속성으로 강제로 바꿔야 화면에서 여백을 통한 글의 위치설정이 가능하다.(display: block;)
◾ 어떤 특정 서식을 먼저 정하고, 원하는 부위에 적용하고 싶다.
1. 특정 서식의 명찰을 먼저 <Sytle>안에 주고 그 안에 표현하고 싶은것들을 표현한다.
2. 그 다음 적용을 원하는 부분에 가서 특정 서식의 명찰을 주면된다. 명찰이 기존에 있었다면 그 뒤에 space+추가하고싶은 명찰을 입력. 즉 명찰이 2개◾ 폰트 적용
글에 무료로 주는 폰트가 있다. 그 폰트의 링크를 <Head>의 <Title>밑에 넣고, <style>안에 * {}를 추가한다. *의 뜻은 아래 모든 태그에 적용해주세요~ 라는 뜻이다.◾ 주석
코딩에서의 주석은 내가 아는 뜻과 다르다.
사람은 읽을 수 있는데 컴퓨터는 읽지 말라는 뜻으로, 코드 중간에 메모를 삽입하거나 적용하고 싶지 않은 코드에 사용한다. 개발환경, html이냐 CSS냐에 따라 언어가 다르기 때문에 단축키를 알아두자! 👉Ctrl+/
◾ 파일분리
내가 하나의 구성에 정말 많은 코드를 쓰지 않겠는가? 코드가 길어지면 뭐다? 읽기 힘들다.
그래서 성격별로 코드를 분리해서 다른 파일로 저장할 수 있고 그 따로 빼내어 저장한 파일을 코드 1개로만 바로 적용할 수 있으니 알아두자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
<style>
* {
/*font-family: 'Yeon Sung', cursive;*/
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: White;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.Wrap {
width: 30px;
margin: auto;
}
.mybtn {
margin: auto;
display: block;
}
.red-font {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div class="Wrap">
<Div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요.</h5>
</Div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn red-font"> 로그인</button>
</div>
</body>
</html>🥂오늘의 쨘
오늘 배운것은 그 당시엔 몰랐지만 내가 전산팀이랑 소통할 때 가장 많은 것을 이야기 했던 부분인 것 같다.
그림 위치요, 글씨체요, 글씨크기요, 그림 크기요 이런 것들.
그래서 이걸 적용하면 당연히 저것도 적용되어야 하는게 아니에요?! 도대체 왜 그런거에요? 물었을 때 아, 이게 원래 그렇습니다. 라는 답변을 들으면 원래 그렇구나 하고 받아들이긴 하지만 이해를 못해서 혼자 뒤돌아서 답답해 하는 나 자신이 생각이 났다.
그리고 이제 깨닫는다. 아 원래 그런거구나 ㅎ
강의 듣다가 선생님은 width를 300xp로 하고 나는 모르고 30px를 했는데 갑자기 로그인 버튼이 세로정렬이 되서 어 이게 갑자기 왜그러냐, 저 위에 그림과 로그인 페이지와 아이디, 패스워드를 입력해 주세요는 그대로인데!!! 라고 당황했는데, html 박스속성과 글 속성을 알고나니 아하...그래서...라고 이해가 된다.
그니까
<h> 로 감싸져 있는 거는 글인거고, 나머지는 박스인거겠지...내가 맞게 이해했는지는 모르겠지만그리고 이런게 여러개가 있겠지...
그래서 다시 한번 느끼지만 참 전산팀과의 소통은 충돌이 많다. 내가 당연히 여기까지 말하면 되겠지 라고 전달했지만 전산팀은 또 그게 아니니까......
코딩은 정말 자유로운 그림판이다.
문제는 너무 자유로워서 개발의견을 전달할 때 어디까지 디테일하게 줘야 하는가. 이 점이 항상 고민이다.
그 의견을 디테일화 하는데도 한계가 있고, 의견을 만드는 것과 디테일하게 다듬는 것도 사람이기 때문에 분명히 빈 곳이 발생하고 그걸 개발하고 검증하는 단계에서 찾을 수 있으면 좋지만 그걸 서로 발견하지 못하고 개발하고 배포하여 외부로 나갔을 때.....
그리고 하필 그 빈곳에서 문제가 터졌을 때......그 책임소재를 어떻게 해야할 것인가...... 누구의 책임인 것인가...경위서는 누가 써야 하는가.... 부터 시작해서 도대체 저 빈곳은 어떻게 메꿀수 있는 것인가......알고리즘이 1~2개면 모르겠는데 알고리즘이 수백 수천개인데.....자꾸 빨리 만들어내라고 재촉하고 시간은 없고.... 와 대기업은 사람이 많아서 그게 되는 건가? 우리같은 작은 기업은 시간도 모자라 인력도 모자라 어떻게 해야하는 것인가? 시련의 연속이다.
참 어려운 문제인것 같다!
Author And Source
이 문제에 관하여([스파르타 코딩클럽을 통해 코딩에 입문하기#3]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@inida91/스파르타-코딩클럽을-통해-코딩에-입문하기3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
