モダンなライオンのように、フロントエンド2期-01

10659 ワード
テキストリンク

これからは私の成長過程を記録します.
2月19日から開発を学ぶ.
本当に行きたかったイケメンライオンのように、2期目の決勝戦を通過して初日が始まりました.
すべては新しくて、よく知らないが、私は努力して4ヶ月走ります.
4ヶ月後にこの文章を読んで、私はどこまで成長するか知りたいです.
**コードクライアントコースのHTML/CSS**
<!DOCTYPE html> ->html5 버전을 의미
<html lang="ko"> ->html 문서의 시작을 의미, lang이라는 속성은 해당문서의 주력으로 사용된 언어
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
<head> -> html 문서의 정보를 작성하는 영역
<body> -> 웹 브라우저에 표시되는 영역, 사용자에게 보여지는 영역 

<!DOCTYPE html>
<html> ->html안에서 가장 큰 가방을 만든 것이다
	<head>  -> 그 다음 가방을 만든 것
		<meta charset="UTF-8"> ->한글 출력
		<title>김멋사의 이력서</title>
		<link rel="stylesheet" href="codelion.css">
	</head>  
	<body>
		<h1>김멋사</h1>
		<p>HTML/CSS</P> ->모든 글을 P
		<footer>내용</footer> ->하단에 공통적으로 쓰여있는 부분
	</body>
</html>
.mainbox {
	border: 1px solid #ebebeb; ->border: 두께 방식 색깔;
	width: 610px;
	text-align: center;
	margin-left: auto;   ->가운데 정렬
	margin-right: auto;  ->가운데 정렬
}
.float-wrap { ->float는 둥둥 떠다니는 특징을 갖고있다. 그래서 가두리를 만들어야 한다.
    overflow: hidden;
} → float로 띄어져있는 요소들을  다 묶어주고 그 다음에 오는 html 요소들이 float영향을 받지 못하게 해준다

.title-text {
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: left;
}

.year-text{
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: right;

    <div class="sns-wrap">
      <a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a> ->a태그는 링크태그
      <img class="sns-img" src="images/twitter.png"> ->이미지연결
      <img class="sns-img" src="images/linked-in.png">
      <img class="sns-img" src="images/insta.png">
    </div>
htmlベース(2)
Thread操作