1주차에 단순히 적혀있는 내용이 아닌
내가 궁금했던 것들 혹은 내가 알아두면 좋을것 같은 상식들을 적어놓은 곳!
#### 간단한용어들
<div> => divison의 약자로 구역을 나눈다
<p> => paragraph 의 약자로 문단이라는 뜻 p태그라고 부름
<span> => 특정 부분만 강조하고 싶을때 <span style="color:red">빨간글자</span> 이런느낌
<style> 에서 사용할법한 명령어들 {
가로 300px => width : 300px;
세로 200px => height : 200px;
text-align : center; => 글자 정렬? 맞추기 : 센터
<strong>왼쪽 정렬(왼쪽 맞춤)</strong>
<div style="text-align:left">
<strong>오른쪽 정렬(오른쪽 맞춤)</strong>
<div style="text-align:right">
<strong>가운데(중앙) 정렬</strong> : "제목" 등에서 중앙 정렬을 주로 사용합니다.
<div style="text-align:center">
<strong>양쪽 맞춤 (양쪽 정렬)</strong> : 워드프로세서에서처럼, 줄바꿈을 하지 않고 즉 Enter키를 치지 않고 1줄로 1문단을 이어서 써야 제대로 양쪽 맞춤이 됩니다.
<div style="text-align:justify">
출처: https://injunech.tistory.com/367 [GOGO]
-특정한곳에 이미지 넣을때 항상 사용하는 3줄- {
background-image: url(" 이미지 소스들~~~ ");
background-size: cover;
background-position: center;
}
border-radius: 10px ; => 이미지 귀퉁이 라운딩하기
}
border: 1px solid white; => 테투리 색갈을 1px 만큼 하얀색으로 바꾸겟다
(border : 선굵기)
(solid : 실선 )
(white : 흰색 )
padding : 10px; => 안쪽여백 10px 만큼 띄워라
margin : 10px; => 바깥쪽 여백 10px 만큼 띄워라
padding-top: 40px; => 위쪽 여백을 40만큼 띄워라
box-shadow: 0px 0px 3px 0px gray; => box 상하좌우에 그림자 효과 회색으로 만들기
내가 원하는 문장을 주석 화 하고 싶다면 => 드래고 하고 컨트롤 + s
그 문장을 다시 풀고 싶다면 => 드래그 하고 컨트롤 + /
이미지 어둡게하기 =>
image : linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url (" 이미지 주소");
이렇게 하면 이미지가 어두워진다
여기는 이해는 안됫지만 그냥 정렬할때 사용된느 것들
justify-content — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
align-items — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
align-self — 개별 flex 항목을 교차 축에 대해 정렬 하는 방식을 제어. flex 항목에 지정하는 속성.
align-content — 사양에서 "굴곡선"에 대해 설명하며, 교차축의 굴곡선 사이의 공간을 제어합니다.
ex)
display : flex;
flex-direction: column;
justify-content: center;
align-items: center;
대충 요런식으로 사용함위에 적힌 것들은 간단한 용어정리들 이닷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle {
color : red;
}
</style>
</head>
<body>
<h1 class = "mytitle">로그인 페이지</h1>
<p>ID : <input type="text"/></p>
<p>PW : <input type="text"/></p>
<button> 로그인하기</button>
</body>
</html>위 코드에서 h1 태그에 class = "mytitle"> 을 추가해줌으로써 로그인페이지라는 글씨가 나오는 줄의 덩어리의 이름을 만들어준격이다. 그래서 그 덩어리의 이름을 스타일에서 수정해줌으로써 바꾸게 되는 원리
.mytitle > button { } /// 이것은 만약 마이타이틀 내부에
버튼 이란것에 손을 대고 싶으면 이런식으로도 연결이 가능하다는 뜻
삽질도 100번 하면 요령이 생긴다. 부족한 건 경험으로 채우는 개발자