전체 글

이번 포스팅에서는 자주 쓰이는 CSS속성들에 대해서 한번 알아볼거에요! 그에 앞서 다시한번 CSS작성법을 짚고 넘어갈게요~!! 선택자{프러퍼티(속성):값(value)}=선택자의 프로퍼티를 값으로 변경하겠다! 라고 해석할 수 있겠죠? 1. 자주 쓰이는 CSS속성 자주 쓰이는 CSS속성에는 color, background-color font-size,font-weight, font-familiy, font-style width, height, max-width, min-width, max-height, min-height border margin, padding 등이 있습니다! 속성들은 너무 많기때문에 다 외울 필요는 없고 필수적인 것들은 알아두되, MDN(CSS를 사용하여 HTML 스타일을 지정하는 방법 ..

2023.07.25 - [[새싹X코딩온]웹 풀스택] - [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 이번에는 선택자에 대해서 알아보도록 할 거에요. 선택자가 어떻게 구성되어있는지부터 먼저 알아보도록 할게요~! 여기에서 p가 선택자이고 중괄{}를 열고 닫는 것을 블록이라고 해요. color:red; seeun0210.tistory.com 이번 포스팅에서는 지난 포스팅 마지막에서 언급했던 가상클래스선택자, 가상요소선택자, 속성선택자에 대해서 알아보도록 할게요! 1. 가상클래스 선택자 :사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소를 선택하여 각 요소의 상황에 따라 사용자..

이번에는 선택자에 대해서 알아보도록 할 거에요. 선택자가 어떻게 구성되어있는지부터 먼저 알아보도록 할게요~! 여기에서 p가 선택자이고 중괄{}를 열고 닫는 것을 블록이라고 해요. color:red;이렇게 ;(세미콜론)이 하나 찍히기까지의 단위를 하나의 선언이라고 하고, 하나의 선언에는 속성(property)와 속성값(value)가 포함되어 있어요! 선택자로는 HTML의 요소를 선택하고 {}내에 속성값을 지정하여 다양한 style을 지정하면 되겠죠 또한 여러개의 위에서 처럼 여러개의 프로퍼티를 연속해서 지정할 수 있으며 프로퍼티간의 구분은 세미콜론으로 해요! 속성은 표준 스펙으로 지정되어있는것을 사용하고, 사용자가 임의로 정의할 수는 없어요. 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기단위 또는 ..

안녕하세요! 오늘은 CSS에 대해서 정리해보도록 하겠습니다! 사실 CSS는 내용이 HTML보다 더 많아서 포스팅이 더 길어질 것 같긴한데 그래도 이왕 시작한거 끝을 봐야겠죠~~?? 그럼 CSS첫번째 포스팅 시작해보도록 하겠습니다! 1. CSS란 무엇인가? Cascading Style Sheet의 약자입니다! 여기에서 Cascading는 '폭포, 연속적인'이라는 의미를 갖는 단어인데 이는 상위요소에서 지정한 스타일이 하위요소까지 연속적으로 적용된다는 의미로 css에서는 적용해 볼 수 있겠죠? 모든 속성이 다 cascading 되지는 않지만 중요한 속성이므로 cascading의 의미는 잘 알아두는 것이 좋다고 합니다! 웹페이지를 디자인 하기위해 사용하는 스타일 언어죠! 그렇다면 CSS는 왜 사용하는 걸까요?..

이번에는 사용자 입력 Form 태그& Input 태그에 대해서 알아볼게요! HTML만으로는 사용자로부터 입력받아 서버에 저장할 수 없어서 나중에 백엔드와 함께 다루어 보도록 하겠습니다! 1. -type: button, text, password, checkbox, radio, date, color, range, file등이 있어요! 1) 버튼, type="button" -버튼을 생성해서 특정기능을 수행 시킬 때 사용해요! 2)텍스트, type="text" -텍스트를 입력받는 폼을 생성해서 사용자로부터 텍스트값을 입력받아, 전달하는 기능을 해요! 예를 들어서 Id입력부분같은거겠죠? 3)패스워드. type="password" -입력값을 자동으로 안보이게 처리해주는게 2)텍스트와의 차이점이에요! 4)체크박스,..

지난 포스팅에 이어서 이번엔 HTML의 TAG종류에 대해서 알아보도록 하겠습니다~! 1. 제목태그~(1->6으로 갈수록 글자 point가 작아짐) -Heading의 약자 H사용 -자동 줄바꿈(블록요소) -하나의 HTML문서에는 하나의 H1태그를 권장 -웹 검색엔진이 가장 먼저 검색하는 태그가 H1태그!! 2. 본문태그 -pragraph의 약자 p사용! 3.줄바꿈 태그 4. 목록태그 1):순서 없는 목록(unordered list) 2):순서 있는 목록(ordered list) 5. 수평 줄 6. 문자 꾸미기 태그들 - 두껍게 -:두껍게+sementic한 의미를 지님!(semantic? 의미적으로 강조! 시각장애인인 경우 스크린리더기를 통해 말로도 강조되는걸 semantic하다~라고 함!!), 보여지는 건..

오늘은 HTML 전반에 대해서 배워보았습니다! 배운 내용이 많아서 2개로 나누어서 포스팅 하도록 할게용(●'◡'●) 1. HTML이란? HyperText Markup Language의 약자로 웹 페이지를 구성하는 가장 기초적인 언어입니다. HTML은 유연성이 매우 크고 컴퓨터 공학과에서는 프로그래밍 언어로 취급하지 않을 정도이지만 웹 페이지를 구성하는 데 있어서 빼 놓을 수 없는 존재죠~ 그래서 HTML을 사용할 줄 아는 사람은 많지만 올바르게 사용하는 사람은 많지 않다고 합니다. 올바르게 사용할 수 있도록 잘 배워봅시다! 2. HTML의 기본적인 구조 (!+tab으로 기본구조 세팅!) Document 나의 HTML문서 입니다(●'◡'●) span의 parent div의 child HTML은 이렇게 기본..

0. OT 및 자기소개 컴퓨터공학을 복수전공하고 있긴 하지만 단순히 언어를 배우는 것 만으로는 프로젝트를 진행하기에 어려움이 있다고 느꼈고, 자바스크립트를 독학하면서 함께 공부하고 프로젝트를 진행할 친구들이 있으면 좋을 것 같다는 생각이 있었는데 우연히 친구가 부트캠프를 추천해주었고 합격하여서 참여할 수 있게되었다. 친구의 이야기를 들어보니 6개월동안 힘들수도 있지만 학교에서는 배울 수 없는 많은 경험을 할 수 있다고 하여서 걱정반 설렘반으로 클래스룸에 들어갔다. 먼저, 크루리더님의 프로그램에 대한 오티가 진행되었고, 다음으로 새싹측에서 직원분들이 나오셔서 진행되는 프로그램 이외에도 다양한 프로그램이 있다는 걸 설명해 주셨다. 들어보니 관심이 있는 프로그램들이 있었는데, 특히 "클래스 인 클래스"와 "러..