2주차 Web 개발 워크샵 진행
1. 워크샵 진행
>>2회차 워크샵<<
10월 9일 저녁 7시부터 동아리 방에서 진행했다.
참여 인원은 10명이었다.
2. 워크샵 내용
CSS
CSS는 무엇인가?
: HTML이 구조를 잡는 거라면, CSS는 그 마크업 언어를 외형적으로 예쁘게 꾸며주는 것!
CSS 주석 처리 방법
/* 주석주석 내용 내용 근데 한줄 짜리 주석은 없어 */
CSS 적용 방법
1. 인라인 으로 적용시키기
<p style="background-color : aqua; font-size: 20px; display: block; width: 100%;"> 나는내용 </p>이런 식으로 태그 내부에 style! 속성의 형태로 추가할 수 있다.
2. head 내부에 선언해주기 (Internal)
<head>
<style>
p {
background-color: aqua;
font-size: 20px;
display: block;
width: 100%;
}
</style>
</head>
3. head에서 link로 불러와서 외부 stylesheet 불러오기 (External)
html head에 이런식으로 선언해 준 뒤,
<head>
<link rel="stylesheet" href="index.css">
</head>
css파일에서 속성을 설정해준다.
p {
background-color: aqua;
font-size: 20px;
display: block;
width: 100%;
}
다양한 CSS
background color image size, font size, margin, border, padding, border-radius 등 다양한 css들을 설명했다.
이 이미지를 사용하여 마진과 보더, 패딩의 의미를 설명하고 왼쪽 오른쪽 위 아래 각각 설정이 가능하다는 점, 또 한번에 설정이 가능하다는 점도 설명했다.
CSS 선택자
#id .class [속성]
와 같은 기본적인 선택자들을 우선으로 설명하고, 띄워쓰기로 다음 차일드에 접근이 가능하다는 정도를 설명했다.
거기에 간단하게 :hover 정도와 :nth-child 설명함.
CSS 실습
저번시간에 했던 index.html 파일에 css 를 추가하여서 조금 더 페이지를 이쁘게 만들어보는 시간을 가졌다.
div {
border: 2px solid gray;
border-radius: 0.5em;
margin: 0 auto;
width: 500px;
}
h1 {
background-color: pink;
}
h3:hover {
background-color: cornflowerblue;
}
li {
list-style: none;
}
p {
font-style: italic;
}
이런 코드를 추가하여서 웹문서를 실행하면,
저번과는 다른 이런 한층 깔끔한 웹문서가 완성된다.
3. 느낀 점
다 같이 실습과 함께 진행하니까 재밌었다.
사람들이 생각보다 태그 개념도 헷갈려 하고, 또 프로그래밍 자체에 익숙하지 않은 사람들이 많아서 그런지 따라오기 버거워 하는 사람들도 있어서, 좀 천천히 진행하면서 차근차근 한 명씩 다 잘해내고 있는지 봐주었다.
html과 css 를 다룬지 나도 굉장히 오래되어서 자잘한 문법들이 많이 헷갈렸다.
인라인으로 선언할 때 어떤 식으로 쓰는지 따옴표가 들어가는지 세미콜론이 들어가는지 헷갈려서 계속 구글링해서 찾아봤다.
그래서 사람들이 모르는 거 물어봤을 때도 좀 당황하기도 했다.
다음시간부터는 자바스크립트 기본적인 내용을 배워볼 생각이다. 함수 등등
'아기 개발자 > HoC 코드스테이츠' 카테고리의 다른 글
| [Code States] 코드스테이츠 Pre Course '1주차' (0) | 2019.11.01 |
|---|---|
| [HoC] 활동 리포트 '2주차' (0) | 2019.11.01 |
| [HoC] 활동 리포트 '1주차' (0) | 2019.11.01 |
댓글