토리의 코딩기록 토리의 코딩기록

[ DEV ] Frontend/HTML , CSS

• 부트스트랩

  [ DEV ] Frontend/HTML , CSS 2023. 1. 12. 13:06

  쉽게 설명하면 HTML 이라는 맨 몸에 코디셋업을 가져와서 챡 입혀주는 거라고 생각하면 될 것 같다. 부트스트랩의 자세한 설명은 아래와 같다. (아래 링크에 있는 다른 분의 블로그 참고했습니다) 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 프레임워크이다. '프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다. 따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말 할 수 있다. 부트스트랩에 열광하는 이유는 글자, 인용문, 목록, 표, 입..

  Read More
• CSS 포지션 [static, relative, absolute, fixed, sticky]

  [ DEV ] Frontend/HTML , CSS 2023. 1. 11. 23:19

  CSS 박스 모델은 어떤 영역을 차지할지 결정하는 것. CSS 포지션은 어디에 배치할지를 요소 배치를 정하는 개념! 기본 값 💡static (기본값) position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, top, left, bottom, right 과 같은 속성 값들을 입력해주어도 static일 때는 무시된다. 변함없음. #a{ /* 변화가 없다. 왜냐? staic은 기본값이라! */ position: static; top:10px; left:20px; } 💡 relative 요소를 원..

  Read More
• [ CSS ] 블럭과 인라인 개념

  [ DEV ] Frontend/HTML , CSS 2023. 1. 10. 21:21

  인라인 요소는 직접 가로와 세로의 길이를 지정할 수는 없지만, padding 속성을 통해서 겉테두리를 통통하게 만들어 줄수는 있음 span{ //width와 height는 의미가 없고, padding은 변화를 확인할 수 있음 width: 100px; height: 200px; background-color: burlywood; padding : 10px }

  Read More
• CSS 박스 모델 연습 / 구글 홈페이지 만들기 실습

  [ DEV ] Frontend/HTML , CSS 2023. 1. 10. 20:56

  Google Google 검색 I'm Feeling Lucky 글씨 사이즈 키우기 h1{ font-size: 80px; } 검색창 바꿔주기 input{ padding : 5px; border: 1px solid lightgray; border-radius:8px; width: 320px; } .bottom{ margin-top : 10px; } .bottom button{ padding: 5px; border: 1px solid lightgray; border-radius : 5px; } margin-left와 margin-top을 사용해서 중앙으로 정렬하기 margin-left margin-top h1{ font-size: 80px; margin-left :180px; margin-top :200px;..

  Read More
• CSS dinner 게임 답안 및 설명 [1번 ~12번]

  [ DEV ] Frontend/HTML , CSS 2023. 1. 10. 18:27

  * 태그 이름이라고 생각하면서 문제 풀기!!!! /* 태그 선택 */ tag { } 1. plate 선택하기. 정답 : plate 2. bento boxes 선택하기! 정답 : bento 3. id Selector 사용하기. 를 확인했으면 선택자 중 id 태그 방식인 #Tag name을 입력하면 된다. 정답 : #fancy 4. 접시 위에 있는 사과 선택하기 내부 선택자 이용! 내부 선택자, 즉 특정 요소 안에 포함되어 있는 자식 요소를 같이 선택하는 문제입니다. plate에 포함된 apple 선택한다고 생각하면 된다. plate 를 먼저 선택한 후, 안쪽에 있는 apple 선택! 정답 : plate apple 5. fancy 접시위에 있는 오이 선택하기. 내부 선택자를 사용하는데 이제 id 속성을 이용..

  Read More
• CSS 복합 셀렉터 연습하기 ( *, 내부 선택자, 동시 선택자, 상태별 선택자)

  [ DEV ] Frontend/HTML , CSS 2023. 1. 10. 17:28

  이번에는 복합 셀렉터로 html을 꾸며보겠다. 개발자 공부법! 개념공부 큰 그림부터 -> 목차부터, 핵심부터, 사소한건 재껴! 얕고 빠르게 -> 한 번에 다 하려 하지말고, 뼈대부터 먼저! 점진적 확장 -> 뼈대에 살을 붙이기!! 코드 따라치기 - 기초가 곧 핵심! 어려운건 스킵하기~ 바꿔보기 - 내 입맛대로 변경하기! 가설 ~> 검증 출제하기 - 출제자의 입장되어보기 문서화!! Why - 개발은 팀 단위! 원활한 협업을 위해! How - 문학적으로 쓰라는 말이 아님. 논리적, 간결! What - 블로그 (부수입), 깃허브 (취업 시 가산점!!) 전체 선택 셀렉터를 이용해서 폰트를 바꿔보자! 사용법은 아래와 같다. /*전체 선택*/ *{ font-family: 'Segoe UI', Tahoma, Gene..

  Read More
• CSS 셀렉터 기본개념 실습해보기

  [ DEV ] Frontend/HTML , CSS 2023. 1. 10. 16:25

  So 밋밋한 HTML을 꾸며보자! 상반기에 할 일 취업에 필요한 것은? 기술력 - 현재 얼마나 준비가 되었나? 성장성 - 앞으로 더욱 발전할 수 있을까? 팀워크 - 함께 일하기 좋은 사람인가? 그래서 갖춰야 할 것? 자소서 - 나를 회사에 파는 광고, 좋은 광고란? 포틀폴리오 - 직접 만든 무언가,실제 좋은 물건인가? 코딩테스트 - 직접적 실력 검증. 자격증은 준비해야하나? 굳이 필요없다. 단, 명시할 경우 준비하기. 우선 link 태그를 이용해서 css 를 사용할 준비를 해보자! 이제 style.css 파일을 만들어서 html을 꾸며보자! 잠깐! selector 는 이렇게 사용하면 된다. 기본 셀렉터에 대해서는 아래 링크에다 정리해두었다. https://ssoontory.tistory.com/151 C..

  Read More