티스토리 뷰
반응형
css에서 가장 헷갈리는 display 속성을 배웠다.
보통 display, align-items, justify-content 세 가지를 이용해 레이아웃을 설계하는데 쓸 때마다 어렵고 헷갈린다.
그래도 오늘 수업을 통해 조금은 감이 잡혔다.
css 끝나고 자바스크립트도 조금 배웠는데 새롭게 알게 된 부분도 많았다.
앞으로 배워야할 jQuery, node, react 모두 자바스크립트를 기반으로 하기때문에 내일부터 진짜 초집중 해야겠다.
● CSS
복합선택자
:first-child{ } //첫째
:last-child{ } //막내
:nth-child(n){ } //n번째
:not(특정태그){ } //특정태그 제외
:nth-child(odd){ } //홀수번째 태그
:nth-child(even){ } //짝수번째 태그
태그 기본 속성
inline - <a>, <span>
block - <div>, <h>, <p>
display 기본 속성
block : 영역 지정 가능
inline : 영역 지정 불가능
inline-block : inline이지만 block처럼 영역 지정이 가능
flex : 제~~일 많이사용 inline-block과 같은 기능
* inline-block, flex의 차이
inline-block : 넓이 값 지정 해줘야함
flex : flex값만 지정해주면 알아서 넓이 정해짐
.flex_box{
display: flex;
height: 100px;
align-items: center; /*width, height에서 가운데정렬*/
justify-content: space-around; /* space-around, space-between, center, left, right 가장 많이 씀*/
}
● javascript
사용법에 따른 <script> 위치
<head> - 웹페이지 로딩 전 이미 동작 *보통 헤드에 넣음
<body> - 웹페이지 로딩된 후 동작
변수종류
var - 재선언, 재할당 모두 가능
let- 재선언 불가능, 재할당 가능
const - 재선언, 재할당 모두 불가능 *실무에서 많이씀
형변환
문자 - String( ), toString( )
숫자 - Number( ), parseInt( )
함수 종류
명시적 함수 - 호이스팅가능 *함수 만든 곳 위에서 써도 실행됨
함수 표현식 - 호이스팅 불가능 *함수 만든 곳 아래에서 써야됨
화살표 함수 - 호이스팅 불가능
switch문
switch(변수){
case 값1:
//변수와 값1 일치하면 실행
break;
case 값2:
//변수와 값2 일치하면 실행
break;
case default:
//모두 일치하지 않을때 실행 *if문에서 else와 비슷
break;
}
(if문이 있는데 굳이 swtich문이 필요한가? 응 필요함
예를 들면 요일별 일정 관리 기능 구현을 할때
월요일이란 변수를 넣으면 월요일에 해야될 일정 실행
화요일이란 변수를 넣으면 화요일에 해야될 일정 실행
수요일 목요일 …)
const value1 = 30;
const value2 = 50;
const code = '+'
function calc(num1,num2,code){
switch(code){
case '+':
calc = num1+num2
break;
case '-':
calc = num1-num2
break;
case '/':
calc = num1/num2
break;
case '*':
calc = num1*num2
break;
default:
alert('잘못된코드임');
break
}
return calc;
}
const result = calc(value1,value2,code)
console.log(result) //80
삼항연산자
조건? 참일 때 실행 : 거짓일 때 실행
const a1 = 10;
const b1 = 20;
const c1 = 30;
a1>b1? console.log('참'):console.log('거짓') //거짓
a1<b1? a1>c1? console.log('참1'):console.log('거짓1'):console.log('거짓2') //거짓1
//a1<b1가 참이면 "a>c? console.log('참1'):console.log('거짓1')" 실행. 눈 크게 뜨고 봐야됨
단축실행
조건 && 참일 때 실행 *거짓일 땐 아예 실행 안됨
const a1 = 10;
const b1 = 20;
const c1 = 30;
a1<b1 && console.log('참') //참반응형
'Coding > 포스코x코딩온' 카테고리의 다른 글
| [포스코x코딩온] 웹 풀스택 과정 4주차 (백엔드 시작) 노드, express, ejs (0) | 2023.05.16 |
|---|---|
| [포스코x코딩온] 웹 풀스택 과정 3주차 무한스크롤 / github 배포 (0) | 2023.05.08 |
| [포스코x코딩온] 웹 풀스택 과정 2주차 부트스트랩 / css 변수, 미디어 쿼리(반응형) (0) | 2023.05.03 |
| [포스코x코딩온] 웹 풀스택 과정 2주차 javascript 이벤트리스너 / 요소 관리 / jQuery로 요소 탐색, class 제어 (0) | 2023.05.02 |
| [포스코x코딩온] 웹 풀스택 과정 1주차 회고 javascript (0) | 2023.04.28 |
댓글