분류 전체보기

이번에는 CSS의 transfrom이라는 속성에 대해서 알아보도록 할게요! 이건 입체적으로 생각해주면 조금 쉽고, 제 기준에서는 position보다는 확실히 더 쉬웠습니다! 1. transfrom transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)효과를 부여히기 위한 함수를 제공합니다. 1) skew: 기울 2) roatate: 회전 3) translate:이동 .beach1{ /* 원래위치를파악하기 위한 배경색 */ background-color:aliceblue; width:400px; height:250px; position: absolute; top: 200px; left:200px; } img{ /* 크기의 단위로 %를 사용 :부모..

이번 포스팅에서는 다소 복잡하고 헷갈릴 수 있는 CSS속성인 position에 대해서 알아보도록 하겠습니다! 저도 이번 파트는 헷갈리는 부분도 많고 어떻게 적용되는건지 이해하는데 시간이 좀 걸렸기에 코드를 보면서 어떻게 적용되는 것인지 잘 생각하면서 따라오면 좋을 것 같습니다! position속성은 단어에서도 알 수 있듯이 위치를 설정하는 속성으로, HTML에서 어떤 요소의 원래 위치를 바꿀 때 사용하는 속성입니다. position속성에서 위치 지정 방식에는 static, relative, absolute, fixed 등이 있는데, ⚠️여기에서 주의해야할 점은 position속성이 먼저 선언 되어야 static, relative, absolute, fixed 이들 코드를 CSS파일에 입력했을 때 유의미하..

이번 포스팅에서는 자주 쓰이는 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하다~라고 함!!), 보여지는 건..