Today I Learned/CSS16 [취업교육] 취업역량강화 - 에이블런 프론트엔드부트캠프 26일차 1. 직업 가치관1. 정의 : 직업을 선택하고 유지하는 데 있어서 중요한 기준이 되는 개인의 신념과 태도2. 필요성• 자기 이해: 자신의 직업가치관을 알면 자신의 강점과 약점을 파악할 수 있음.• 직업 선택: 자신에게 맞는 직업을 선택하는 데 중요한 역할을 함.• 만족도: 직업가치관에 맞는 직업을 가질 때 직업 만족도가 높아짐.• 목표 달성: 직업가치관이 명확하면 목표 설정과 달성이 더 쉬워짐.3. 유형• 경제적 보상: 높은 연봉과 보상을 중시하는 가치관.• 안정성: 직업의 안정성과 일자리 보장을 중시하는 가치관.• 자기 발전: 개인의 성장과 발전 기회를 중시하는 가치관.• 사회적 기여: 사회에 긍정적인 영향을 미치는 것을 중시하는 가치관.• 창의성: 창의적이고 혁신적인 일을 중시하는 가치관.4. 평가와.. 2024. 8. 20. [CSS] 단위 속성 - 에이블런 프론트엔드부트캠프 23일차 속성값설명px픽셀 단위로 지정%부모태그 기준, %단위로 지정vw브라우저의 너비 기준, 백분율로 지정vh브라우저의 높이 기준, 백분율로 지정vmin브라우저의 높이와 너비 중 더 작은 것 기준, 백분율로 지정vmax브라우저의 높이와 너비 중 더 큰 것 기준, 백분율로 지정 1. pxpx 단위로 크기를 지정하면 너빗값 혹은 높잇값이 고정되어 브라우저의 크기를 늘리거나 줄여도 변하지 않는다.article { width: 100px; height: 100px;}2. %%는 상대적인 단위이다. 부모태그를 기준으로 값이 변한다. article { width: 100%; height: 100%;}3. vw, vhvw는 너비, vh는 높이를 말한다. %와 달리 부모태그가 아닌 브라우저의 크기를 기준으로 크기가.. 2024. 8. 14. [CSS] SASS 기본 문법 - 에이블런 프론트엔드부트캠프 11일차 1. 주석한글 주석을 달기 위해서 문서 최상단에 아래와 같은 코드를 작성한다@charset "UTF-8"; 한 줄 주석 처리는 sass가 감지하지 않아서 css 파일에 업데이트 되지 않는다 // 한 줄 주석처리는 css 파일에서 보이지 않는다 여러 줄 주석 처리는 css에 적용한다./* 블록 주석처리는 css에 업데이트시킨다*/ 2. 변수변수 선언 방법은 다음과 같다// $변수명: 속성값;$width: 100%; 변수 사용 방법은 다음과 같다// 속성명: $변수명width: $width; 3. 연산자css에서 calc함수를 사용해 연산했던 내용을 scss에서는 calc 함수를 사용하지 않고 사용할 수 있다.width: 100% - 10%; 단, 단위가 다를 경우에는 calc함수를 사용해야 한다. 4. 중.. 2024. 7. 29. [CSS] SASS 설치 방법 - 에이블런 프론트엔드부트캠프 11일차 1. Node js 다운로드nodejs를 구글에 검색해 다운로드를 진행한다.nodejs를 다운 후 터미널을 열어 아래와 같은 명령어를 작성해 다운로드가 제대로 되었는지 확인한다npm -v 버전이 제대로 출력된다면 설치가 제대로 되었다고 볼 수 있다.2. SASS 다운로드node 설치 후 터미널에서 아래와 같은 명령어를 작성한다. 맥의 경우에는 맨 앞에 sudo 를 붙여준다.npm install sass -g 3. SASS 실시간 컴파일 명령 sass/style.scss 파일 생성 후 아래와 같은 명령어를 sass 폴더 상위 디렉토리에서 작성한다.sass --watch scss/style.scss:css/style.css 2024. 7. 29. [CSS] HTML CSS 복습 - 에이블런 프론트엔드부트캠프 11일차 1. Block 태그대표적인 block 태그는 div, 시멘틱태그(Header, section, footer, article 등)가 있다. block 태그는 화면의 가로 너비 기준으로 전체의 한 영역을 차지한다. width, height을 통해 크기를 조절할 수 있다. 크기 값을 지정하지 않을 경우 width는 화면 가로 너비를 모두 차지하고, height는 자신이 가진 요소만큼의 크기를 가진다.2. Inline 태그inline 태그로는 h1~h6과 p 태그 등이 존재한다. 이 태그들은 inline 요소로, 자신이 가진 요소만큼만 너비와 높이를 가진다.margin과 padding은 위아래는 지정이 불가능하지만, 양옆은 지정이 가능하다. 또한, 줄바꿈이 되지 않는다.3. 텍스트 특정 부분 강조텍스트의 특정.. 2024. 7. 29. [CSS] rem, em - 에이블런 프론트엔드부트캠프 8일차 1. rem, emrem은 root element의 약자로, 루트 요소인 html요소의 fontsize를 1rem으로 기준하는 상대적인 길이 단위를 말한다.em은 element의 약자로 상속된 부모요소의 fontsize를 1em으로 기준하는 길이 단위이다.section h1 { font-size: 3.2rem;}section h1 { font-size: calc(16px * 3.2);}두 코드가 동일하게 적용되는 것을 볼 수 있다. 2024. 7. 24. 이전 1 2 3 다음
