Developer : 태하팍/Think for insight
제주도 web세미나
태하팍
2023. 9. 22. 15:45
반응형
제주도에서 세미나라니..
대부분의 큰 세미나는 스울에서 하기 때문에 열정이 식었는지..
이제는 못가겠다 싶었는데 마침! 제주도에서 세미나를 하는것을 발견하였다 ㅎㅎ
코로나맵을 만든 대학생으로 유명한분이였는데
어떤 세미나인지 궁금해서 들어보았다.
세미나를 들었더니 수료증이 나옴! 필요 없는데..무튼 온라인으로 나옴!
세미나 내용은..
들으러 오신분들이 완전 초보자들이 많아서 내용은 아주 기초적인 내용이였다.
html/css
먼저 visual studio를 깔아서 진행하였다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<nav>
<div class="container">
<img class="main-logo" src="https://statics.goorm.io/logo/goorm.svg" />
<ul id="button-wrap">
<li>
<button class="nav-button">릴리즈 노트</button>
</li>
<li>
<button class="nav-button">로그인</button>
</li>
<li>
<button class="nav-button primary">회원가입</button>
</li>
</ul>
</div>
</nav>
</body>
</html>CSS
body {
margin:50px !important;
/* 밖으로 간격을 주겠다. */
/* padding은 안쪽으로 간격을 주겠다.
!important는 인라인, 이터널등 무시
*/
}
.main-logo {
width: 85px;
}
.container {
display: flex; /* 수평으로 만들어 줌 */
border : thin solid rgba(0,0,0,3); /* 테두리 마지막 4번째 파라미터 투영도 낮을수록 투명 */
padding: 12px 16px; /* 상하 / 좌우 */
justify-content: space-between;
align-items: center; /* 수직에 대한 내용 */
}
.container li {
list-style: none; /* 구분점 제거 */
}
.container #button-wrap {
display: flex;
margin: 0px;
}
.nav-button {
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
border: 0;
cursor: pointer;
line-height: 22px; /* 글자의 높이 */
border-radius: 10px; /* 꼭지점 둥글게 */
background-color: white;
/* 버튼간 사이간격 왼쪽도 간격이 발생 휴먼에러 발생할 여지를 줌. */
/* margin-left: 4px; */
}
.nav-button:hover {
background-color: rgba(0,0,0,0.05);
}
.primary{
background-color: skyblue;
}
.primary:hover {
background-color: rgb(111, 218, 78);
color: #ffffff;
}
/* 아래처럼 해야 함 */
li + li {
margin-left: 4px;
}결과물
그 외 기초 학습
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title, meta, css , js 적용 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Groom Project</title>
</head>
<body>
<!-- 실질적 코드가 들어가는 곳 -->
<p><div>컨텐츠를 묶어야 할 때 사용</div></p>
<p><span>문자</span></p>
<!-- div tag, span tag 왜 나눠서 쓰나? : 어떠한 역할을 하는지 분리하기 위해서! -->
<a href = "https://donghunee.github.io/" target="_blank">링크!!</a>
<p>단락1</p>
<p>단락2</p>
<p>단락3</p>
<ul>
<li>ppp</li>
<li>tttt</li>
<li>hhhh</li>
</ul>
<ol>
<li>내용1</li>
<li>내용2</li>
</ol>
<span><br>로 줄바꿈?"</span>
<br>
<br>
<span>줄바꿈??</span>
<h1>큼큼큼큼큼큼</h1>
<h2>큼큼큼큼큼</h2>
<h3>큼큼큼</h3>
<h4>큼큼</h4>
<h5>큼</h5>
<p>text</p>
<input type="text"><br>
<p>password</p>
<input type="password"><br>
<p>number</p>
<input type="number"><br>
<p>range</p>
<input type="range"><br>
<p>color</p>
<input type="color"><br>
<p>file</p>
<input type="file"><br><br>
<input type="button" value="버튼">
<div>
<input type="radio" name="ra">라디오1</input>
<input type="radio" name="ra">라디오2</input>
<input type="radio" name="ra">라디오3</input>
</div>
<br>
<div>
<input type="checkbox" name="ch">체크체크1
<input type="checkbox" name="ch">체크체크2
<input type="checkbox" name="ch">체크체크3
</div>
<!-- HTML 선택자
1. class : 그룹으로 묶어서 스타일을 지정함.(여러개 지정가능)
ex) <p class="c1"></p>
2. id : 스타일을 지정할 때 한가지만 지정함(한개만 지정가능)
ex) <p id="id1"></p>
-->
<!-- CSS -->
<!-- CSS 적용 방법 3가지 : 우선순위가 있음!! -->
<!-- 1순위 inile > 2순위 이터널 > 3순위 Linking -->
<!-- 첫번째 inline 방법 : tag와 같이 사용한다. -->
<p style="color: red;">Red hot, 레드핫!!</p>
<p>레드핫 hot!!</p>
<style>
p { color:red;}
</style>
<!-- 두번째 Linking 방법 : header에 작성! -->
<link rel="stylesheet" href="style.css">
<!--
class
다중으로 적용 : .test{ coler:red;}
선택자 { 속성:속성값}
id
유니크로 적용 : #test{ color:red;}
-->
</body>
<footer>
<!-- footer가 들어가는 곳 -->
</footer>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS TEST</title>
</head>
<body>
<style>
.cl {color: aqua;}
p.cl {color: yellow;}
#idx {color: blue;}
p#idx1 {color: skyblue;}
.cl {font-size: 100px;}
/* * {
color:brown;
} */
/* 태그 선택자 */
span { color:red;}
/* 하위 선택자 */
div .cl{color:blueviolet;}
/* 자식 선택자 */
ul > li {
color: blue;
}
/* 형제 선택자 */
li ~ li {
color:red;
}
/* 형제끼리 인접 */
li + li {
color:blue;
}
/* before : 말풍선 구현시 사용 */
p#idx::before{
content: "정말";
color:red;
}
/* 첫번째 요소만 변경하겠다. */
ul li:first-child {
color:chartreuse;
}
/* p 태그에 마우스를 올리면~블라블라 하겠다. */
p:hover {
transition-duration: 0.5s;
transform: translate(200px,0);
}
</style>
<div>
<ul>
<li><p class="cl">웹</p></li>
<li><p class="cl">이</p></li>
<li><span id="idx1">spuer</span></li>
<li><p id="idx">최</p></li>
<li><p>go</p></li>
<li><span class="cl">야</span></li>
</ul>
</div>
</body>
</html>
세미나를 들으면서 기초적인 학습을 했지만
프론트엔드단 개발자의 입장에서 어떻게 디자인을 하고 만들어나가는지 등을 알게 되었다.
쉽든 어렵든 배우는게 있다면 다시 세미나를 들으러 가야겠다.
반응형