1주차 강의는 기본적인 프론트엔드를 위한 HTML, CSS.
웹 : 서버에 저장된 데이터를 받아와 보여주는 것
| 사용자 브라우저 |
요청→ | 서버 데이터 |
| ←전송 |
요청에는 연결된 환경이 필요하지만 전송 이후에는 관계 없음
이번 강의에서 배운 코드들 정리
<title> 페이지 명 </title>
<head> 웹페이지의 구성 전체, 이 안에 모든 것이 있다! </head>
<body> 눈에 보이는 page 구성 내용들 </body>
└ <div> 구역 지정, 박스 </div>
└ <p> 문단 </p>
└ <h1> 글의 제목 <h1> <h2>, <h3>...등이 있으나 주로 <h1> 사용
>> 그외..
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
class="코드 내 이름 지정 ex. mytitle"
지정한 이름으로 style변경 가능함 요것이 css
<style>
.mytitle {
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
}
</style>
.mytitle > button : 지정된 구역 내 하위 요소를 따로 지정할 수 있음
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn > button {
margin-right: 10px;
}
코드마다 지정된 작업이 있어 어떤 것을 사용할지는 연습하고 만들면서 배우기
*는 모든 것을 의미함 ( * 자주 쓰는데 이제 못쓰겠네ㅋㅋ;)
margin : 외부 간격 (시계방향)
padding : 내부 간격
이중 디스플레이 플렉스는 설정한 구역(div) 내 자동 정렬 코드.
중괄호, ; , 코드 정렬을 잊지말자!
코드 정렬 Shift + alt(option) + F
주석 Ctrl + /
함께 개발할때 필요함!
1주차 강의로 만든 페이지 저장저장
https://diane073.github.io/learning-now/
나의 영화들
영화url 별점 Choose... ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ Comments 기록하기 닫기
diane073.github.io
생각보다 성실한 인간인 나.. 칭찬해
스스로 약속한 바를 잘 지키면서 꾸준히 앞으로도 잘 해나갔으면 좋겠다 화이팅:)
'AI 웹개발반 > 웹개발, 파이썬 기초' 카테고리의 다른 글
| [python] for-else문 사용하기 (0) | 2023.08.15 |
|---|---|
| 230329-0402 웹개발, 파이썬기초 4주차 (0) | 2023.04.02 |
| 230324 웹개발/파이썬 3주차 (1) | 2023.03.24 |
| 230313 웹개발 2주차 (0) | 2023.03.14 |
| 230306 개발 공부 시작 (0) | 2023.03.06 |
