분류 전체보기

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 아홉 번째 날로, CSS 공부 마지막 날입니다! 마지막까지 힘을 내서 공부를 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(278~315p) 1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 2. 그리드 레이아웃으로 2차원 레이아웃 설계하기 3. 반응형 웹을 위한 미디어 쿼리 사용하기 1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 flex는 다음과 같이, display로 적용할 수 있습니다. display: flex; flex-direction, flex-wrap, flex-flow justify-content, align-items, align-content, align-self 등등... 정말 많은 속성들이 있..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 여덟 번째 날로, CSS 공부 네 번째 날입니다! CSS는 재밌으니까 조금만 더 힘내서 공부 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃공부할 내용(223~276p) 5. 위치 속성으로 HTML 요소 배치하기 6. 전환 효과 속성 적용하기 7. 애니메이션 속성으로 전환 효과 제어하기 8. 변형 효과 적용하기 9. 웹 폰트와 아이콘 폰트 사용하기 5. 위치 속성으로 HTML 요소 배치하기 5.1 position 속성 position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용합니다. position은 정말 무엇보다도 중요하고, 제대로 이해하는 게 중요해요! 글을 보면서 이해하는 것보다 직접 코드를 따라 치면서 ..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 일곱 번째 날로, CSS 공부 세 번째 날입니다! 오늘부터 CSS에 대해 깊게 파고들 텐데 준비되셨나요? 그러면 CSS 공부 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(172~222p) 1. CSS의 특징 살펴보기 2 텍스트 속성으로 텍스트 꾸미기 3. 박스 모델들 구성하는 속성 다루기 4. 배경 속성으로 요소의 배경 설정하기 1. CSS의 특징 살펴보기 1.1 기본 스타일 시트 hr 태그를 배울 때, 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 크기와 굵기로 표시됐어요. 그 이유는 웹 브라우저 자체에 기본 스타일 시트가 있기 때문입니다. 이 부분에 대해선 깊게 공부하시지 않고 넘어가도 괜찮습니다 ㅎㅎ ..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 여섯 번째 날로, CSS 공부 두 번째 날입니다! 그러면 5장 선택자 다루기를 이어서 공부해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(142~169p) 5. 기본 선택자 사용하기 6. 조합 선택자 사용하기 7. 가상 요소 선택자 사용하기 8. 가상 클래스 선택자 사용하기 9. 다양한 선택자 조합하기 5. 기본 선택자 사용하기 5.1 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법입니다. * 기호를 사용해 전체 선택자를 표시할 수 있어요! 다음과 같이 * 기호를 통해 스타일을 지정하면 h1, p 태그 모두 빨간색상이 적용되는 것을 볼 수 있습니다. 5.2 태그 선택자 이번엔 전체..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 다섯 번째 날로, CSS 공부 첫번째 날입니다! 설레는 마음으로 CSS 첫 공부 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용 (132~139p) 1. CSS 문법 살펴보기 2. CSS 적용하기 1. CSS 문법 살펴보기 1.1 문법 형식 CSS 문법은 크게 선택자와 선언부로 구분합니다. 선택자는 CSS 스타일을 적용할 HTML 태그를 선택하는 영역이고, 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역입니다. 1.2 주석 CSS도 HTML처럼 코드에 주석을 넣을 수 있습니다. 주석은 코드에 설명을 남기는 것이며 다음과 같이 설정합니다. /* 주석 내용 */ 2. CSS 적용하기 문법을 살펴봤으니, 이제 직접 적용..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 네 번째 날로, HTML 공부 마지막 날입니다! 조금만 더 힘내서 3장 나머지 부분을 공부해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용 (82~127p) 6. 폼 구성하기 7. 표 만들기 8. 멀티미디어 설정하기 9. 웹 페이지 구조를 설계하는 시맨틱 태그 10. 태그 종류에 상관없이 사용하는 글로벌 속성 6. 폼 구성하기 6.1 form 태그 form 태그는 폼 양식을 의미하는 태그입니다. 그래서 HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성합니다. 💡 멘토 TIP 여기서 form이란 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미합니다. 아래 예시와 같이 로그인할 수 있도록 ..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 세 번째 날로 3장, 실무에서 자주 사용하는 HTML 필수 태그를 다뤄볼 예정이에요! 2장에서는 주로 이론 위주였는데 3장부터는 실습 위주로 진행할 예정입니다. 그럼 공부 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용 (60~81쪽) 1. 텍스트 작성하기 2. 그룹 짓기 3. 목록 만들기 4. 링크와 이미지 넣기 5. 텍스트 강조하기 1. 텍스트 작성하기 실습을 할 예정이라 모두 VSCode를 준비해 주시고, 기본 구조를 만들어주세요🙂 오늘 하는 것들은 꼭 전부 따라 치면서 진행해 주세요! 1.1 hn 태그 hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용합니다. h1부터 h6개가 있는데 여기서 h는 heading을..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 두 번째 날입니다. 2장에선 HTML 문서 작성을 위한 기본 내용을 공부해요! 어렵지 않으니 같이 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(46~57쪽) 1. HTML의 기본 구성 요소 2. HTML의 기본 구조 3. HTML의 특징 파악하기 1. HTML의 기본 구성 요소 1.1 태그 웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양합니다. 태그는 이런 다양한 구성 요소를 정의하는 역할을 하며, HTML 문법을 이루는 가장 작은 단위입니다. 기본 형식은 다음과 같아요! 예시로는 1장에서 배웠던 , 등이 있겠죠? 이런 것들을 모두 태그라고 합니다. 1.2 속성 속성은 태그에 어떤 의미나 기능을 보충하는 역..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 첫날이니 가벼운 마음으로 개발환경 설정과 간단한 HTML 문서를 만들어 보겠습니다. 앞으로 한 달 동안 잘 부탁드려요 : ) 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용 (30~44쪽) 1. 개발환경 설정하기 2. 첫 번째 HTML 문서 만들기 1. 개발환경 설정하기 코드를 작성하고 실행하려면 여러 도구, 즉 프로그램이 필요한데 이렇게 프로그램을 설치하고 준비하는 과정을 개발 환경을 설정한다고 합니다. 저희 책은 실무에서 가장 많이 사용하는 비주얼 스튜디오 코드(Visual Studio Code)를 사용할 거예요! 그럼 이제 설치해 볼까요? (이미 설치되어 있다면 건너뛰어도 됩니다) 1.1 코드 작성을 위한 코드 에디터 설치하기 아래 공식 ..

UMC 활동의 마지막이라고 할 수 있는 DemoDay가 이틀 동안 프론트원에서 진행됐습니다! DemoDay에선 3기 UMC에서 6개월간 기획부터 개발까지 공부하며 만들어낸 32개의 작품들을 구경할 수 있으며, 총 32개 팀이 기획부터 개발까지 직접 진행한 앱들을 가장 먼저 체험해 볼 수 있습니다.🔥 먼저, 데모데이는 2월 15일, 16일 이틀 동안 진행되었습니다. 선착순으로 32팀을 뽑았고 저희 Lifolio 팀은 15일, 자리번호 2번에 선정되었습니다. 데모데이에 가게 되면 먼저, 티켓을 받게 됩니다. 다른 팀들의 부스를 체험하면 알파벳 달걀 스티커를 받을 수 있는데 UMCDEMODAY라는 10개의 알파벳을 모두 모으면 이벤트 응모가 가능합니다! 모든 팀의 기획+디자인+앱 퀄리티가 높아서 설명을 듣는 ..