[프론트엔드]웹 개발 기초 1일차

들어가기 전 웹의 기초 동작

사용자가 브라우저에 URL을 입력한다.
서버에 요청하면 서버는 클라이언트에게 HTML, CSS, JavaScript 파일, 그리고 필요에 따라 DB에서 가져온 데이터를 포함한 응답을 반환한다.
브라우저(클라이언트)는 받은 HTML 파일, 데이터를 렌더링 하여 사용자에게 웹 페이지를 보여준다.

CSS 기초

디자인을 하기 위해서는 무언가를 지칭하고 명령을 해야한다.
실생활 예) 저 긴 바지(명확한 지칭)에 빨간색을 칠해야겠다.

<style>
	/* .지칭을 하고 {} 안에 디자인을 해준다. */
	.myLongPants {
     		color : red;
   	}
</style>

<body>
	<!-- 태그 안에 class로 명확하게 지칭을 부여한다. -->
	<div class = "myLongPants"> 나의 긴 바지 </div>
</body>

만약 긴 바지(부모)의 주머니 모양(자식)을 지칭할 때
: 부모 클래스 > 자식 클래스

<style>
	.myLongPants {
    	color : red;
	 }
	.myLongPants > pocket {
		color : green;
	 }
</style>

<html>
	<div class = "myLongPants"> 나의 긴 바지
    		<div class = "pocket"> 주머니 
   	</div>
</html>

<body>
	<div class = "myLongPants"> 나의 긴 바지
    		<div class = "pocket"> 주머니 
        </div>
</body>

Tip) 박스의 크기가 안 보일 때는 "background-color" 를 활용하라!

margin과 padding

- margin : 바깥 여백
- padding : 안쪽 여백
Tip) 이거 또한 "background-color" 를 잘 활용해야 한다.

Flex

(중요)Felx를 사용하여박스 안에 내용물들을 정리하는 법

<style>
	display: flex;
	flex-direction: row; /*column*/
	align-items : center;
	justify-content : center;
</style>

css 순서 및 마무리

div 태그로 감싸준다.
박스의 영역을 background-color로 확인 후 width와 height로 조정한다.
영역 확인 후 padding, margin 혹은 flex를 사용하여 미세 조절한다.

JavaScript(JQuery) 활용 기초

JS, JQuery로 CSS 비교 조작

// js 조작
<script>
	function click() {
     		document.getElementId('result').style.color = 'red';
	}
</script>

<body>
	<button onclick = "click()">체크</button>
    
   	<h1 id = "result">결과</h1>
</body>

// jQuery 조작
<script>
	function click() {
   		$('#result').css('color','red');
	}
</script>

<body>
	<button onclick = "click()">체크</button>
    
    <h1 id="result"> 결과 </h1>
</body>

JQuery로 활용 예제

List

<script>
	function checkResult() {
    		let a = ['사과', '배', '감', '귤'];
    		$('#q1').text(a[2]);
	}
</script>

<html>
	<div class="list-part">
        	<h2>2. 리스트</h2>
        	<div id="q1"></div>
    	</div>
</html>


//결과
<div id="q1">감</div>

Dictionary

<script>
	function checkResult() {
         	let b = {'name' : '영수','age' : 30}
         	$('#q2').text(b['name']);
     }
</script>

<html>
	<div class="dict-part">
        	<h2>3. 딕셔너리</h2>
        	<div id="q2"></div>
    	</div>
</html>

//결과
<div id="q2">영수</div>

List + Dictionary

<script>
	function checkResult() {
         let c = [
             { 'name': '영수', 'age': 30 },
             { 'name': '철수', 'age': 35 }
         ]
         $('#q1').text(c[1].name);
     }
</script>

<html>
	<div class="list-dict">
        	<h2>4. 리스트 딕셔너리</h2>
        	<div id="q3"></div>
    	</div>
</html>

//결과
<div id="q3">철수</div>

1000-e 님의 블로그