션냥의 개발일지

안녕하세요 지난 번에 다 끝마치지 못한 레이아웃에 대해 알아볼게요.테두리에 관련된 스타일과 여백을 조절하는 스타일에 대해 살펴보겠습니다.바로 시작..하겠습니다..🚀🚀border: 테두리 관련 속성저번 편에서 박스모델이 content, padding, border, margin으로 이뤄져 있다는 것 기억나시나요?(기억이 안나신다면...뒤로가기..다시 복습하시와요..)그 중에서 박스의 테두리를 그리는 속성인 border에 대해 알아볼게요🔲border-style테두리의 모양을 지정할 때 사용하는 속성 지정가능한 속성 값 none: 테두리 표시하지 않음. 기본 값. dashed: 직선 모양의 점선으로 테두리 표시. dotted: 점선으로 테두리 표시. double: 이중선으로 ..

안녕하세요 오늘은 css에서 뺄 수 없는 레이아웃에 대해 알아볼게요!Layout에 대한 개념은 현업에서도 많이 쓰기에 꼼꼼히 다뤄보겠습니다그럼 바로 시작할게요 🚀🚀블록 레벨 태그와 인라인 레벨 태그지난 번에도 한 번 말했었던 개념인데 기억나시나요?블록 태그는 한 줄을 다 차지하고 인라인은 내용만큼만 차지한다고 했었죠.이에 대해 조금 더 자세히 알아볼게요.블록 레벨 태그태그를 추가했을 때 브라우저의 한 줄을 다 차지해요.그렇기 때문에 좌우에 다른 태그를 배치할 수 없습니다.또한, 블록태그는 width, height, margin, padding 등 크기나 위치를 지정할 수 있어요.p, div, h1~h6, ul, ol, blockquote, form, hr, table, fieldset, ...등이 ..

안녕하세요 오늘은 배경에 관련된 style을 알아볼게요.오늘도 열시미 달려야 하니 바로 시작하겠습니다..🚀🚀🎨background-color배경색을 지정할 때 사용하는 속성background-color: 색상(16진수, rgb, rgba, 색상이름);❗배경색도 구조나 위치관련 스타일이기 때문에 상속되지 않아요.그렇기 때문에 자식태그에서는 부모태그의 배경색이 영향을 미치지 않습니다.▶️같은 핑크색을 각각 다른 색상 표기법으로 back1,back2,back3에 주었어요. 출력 화면은 아래와 같습니다. ▶️만약 배경색이 상속이 되었으면 핑크색과 연두색이 섞인 색이 p태그에 나타났을거예요.하지만 상속이 되지 않아 p태그의 back4에 지정된 배경색이 그대로 표출되는 것을 볼 수 있어요.🖼️backgrou..

안녕하세요 저번에 양 조절 실패 이슈로..끝내지 못한텍스트 관련 스타일을 마저 살펴보겠습니다.🚀🚀✏️text-decoration텍스트에 밑줄이나 취소선을 그어주는 스타일 속성지정가능한 속성 값underline: 밑줄을 그어줌.overline: 윗줄을 그어줌.line-through: 취소선을 그어줌.none: 기본값. 아무 선도 표시하지 않음.➡️direction글자의 쓰기 방향을 지정하는 속성지정가능한 속성 값ltr(left to right): 왼쪽에서 오른쪽으로 텍스트 표시. 기본값.rtl(right to left): 오른쪽에서 왼쪽으로 텍스트 표시.↘️text-align문단의 텍스트 정렬 방법을 지정하는 속성지정가능한 속성 값start: 텍스트를 줄의 시작위치에 맞춰서 정렬end: 텍스트를 줄의 ..

안녕하세요 오늘은 텍스트와 관련된 style을 알아볼게요.글꼴이나 줄간격, 글자 색상 등 텍스트와 관련된 여러 속성을 바꿀 수 있어요. 그럼 바로 관련 스타일들을 살펴볼게요.🚀🚀🔠font-family웹 문서에서 사용할 글꼴을 지정하는 속성보통 해당 글꼴이 없을 경우를 대비하여, 여러 개의 글꼴을 지정해 놓는 것이 일반적이다.문서의 통일성을 높이기 위해 body 태그에 글꼴을 지정.글꼴 지정 방식font-family: 글꼴이름1, 글꼴이름2, 글꼴이름3, ... 만약, 글꼴이름1에 해당하는 글꼴이 없을 경우, 그 다음에 지정한 글꼴이 적용됨.웹 글꼴 사용하기웹 문서 안에 있는 글꼴에 대한 정보를 가져와서 사용하는 방식.시스템에 없는 글꼴이더라도 개발자가 원하는 글꼴을 사용할 수 있다는 장점이 있다...

안녕하세요 오늘은 css의 기본 개념에 대해 알아보겠습니다.바로 시작할게요.먼저, 웹의 기본 뼈대인 html에 살을 붙이는 느낌인 css는 웹의 디자인을 담당해요.저번 시간에 풀어본 문제에 조금의 css를 붙여서 그나마 괜찮아보였지만,html으로만 웹을 만든다면 그림이나 글자의 정렬도 잘 맞지 않고 어설퍼 보일 수 있어요.지난 문제에서 html으로만 구성된 웹과 css를 조금 첨가한 것을 비교해볼게요.위와 같이 html으로만 구성한다면 색을 입힐 수도 없고,마지막 버튼을 보시면 정렬도 내 맘대로 할 수 없는 것을 볼 수 있어요.그러니 웹개발을 하시려면 css는 필수!!라고 할 수 있습니다.css의 기본 개념을 하나하나 살펴볼게요.🎨스타일 입히기html의 기본 구조를 보시면웹페이지를 구현하는 코드는 ht..

안녕하세요!!!지금까지 프론트엔드의 가장 기초적인 html에 대해 배우시느라 수고하셨어요.시작이 반이다!!!! 여기까지 오신 이상...나가실 순 없습니당..지금까지 꽤나 많은 태그를 배웠는데요.하지만 이 많은 태그를 외우실 필요는 없는거 아시져???많이 써보고, 많이 검색해보고, 내가 필기한거 많이 보고..이 루트를 계속 하시다보면 어느샌가...세뇌가 되어 있을거예욥..오늘은 지금까지 배운 태그들을 활용해서 문제를 풀어볼게요.!!!문제는 바로!!!자기소개서 페이지를 만들어보는 것입니다.!!각자 어떤걸 소개하고 싶은지 다르니 페이지는 모두 제각각일거라 생각해요.그래도 필수적으로 들어가야 할 내용, 태그들은 알려드릴게요.제가 문제로 낸 것을 풀고나신 뒤엔, 추가적으로 내용을 추가하셔도 좋아요. 그럼 바로 문..

안녕하세요 오늘은 드디어 html의 마지막 시간..인줄 알았지만용..form 태그에 관한 내용이 생각보다 많은 것 같아 한번 더 하게 될것 같네요ㅜㅜ개념에 대한 것은 오늘 다 끝내구 다음시간에는 지금까지 배운 것들을 토대로총정리 실습 문제를 하나 풀어보고 끝낼게요. 그럼 바로 시작해보겠습니당🚀🗂️fieldset 과 legend 태그하나의 폼에서 여러 구역으로 나눠야 할 때 사용해요.쇼핑몰 사이트의 주문서 폼을 예시로 들자면, 사용자 정보와 배송 상품 정보를 분리해서 표시할 수 있죠.fieldset: 폼 안에 있는 태그들을 하나의 영역으로 묶어서 외곽선을 그려줘요.legend: fieldset 태그 안에 작성해주며 해당 그룹 안에 제목을 붙여줘요.➡️fieldset 태그로 외곽선을 그려주며 폼 안에 ..

안녕하세요, 오늘은 form 관련 태그에 대해 알아볼게요. form 태그는 모든 웹사이트에 들어간다고 해도 과언이 아닐 만큼 필수적인 요소입니다. 바로 로그인과 회원가입, 주문 페이지 등에 들어가는 태그이기 때문이죠. 프로젝트에도 바로 적용시킬 수 있는 코드이니 집중!! 🚀먼저, form이란 백엔드나 다른 페이지에 요청을 보낼 수 있는 태그예요.form 태그 안에 담긴 데이터들도 함께 보낼 수 있습니다.데이터는 어떻게 담냐고요??form 관련 태그들을 이용하여 사용자가 값을 입력하도록 하는 창을 만들고,그 창에 입력된 값들을 form 태그가 가지고 있다가 요청을 보낼 때 같이 보내지게 돼요. 간단하게, 아이디를 입력하여 로그인을 하는 form 태그를 한 번 살펴보면서 개념을 설명해드릴게요.🔍for..

안녕하세요! 이번에는 HTML을 활용해서 이미지와 하이퍼링크를 웹에 표출해 볼게요 😊.이미지를 표출해주는 img 태그 🖼️ 웹 페이지에 img 태그를 이용하면 이미지를 표출할 수 있습니다. img를 입력한 뒤 tab 키를 누르면 자동완성 값으로 src 속성과 alt 속성이 지정되어 있는 것을 볼 수 있어요. src 속성: 사용할 이미지 파일의 경로를 지정해줘요. '../'를 입력하여 자동으로 그 상위 디렉토리 목록을 불러주어서 손쉽게 경로지정이 가능해요.alt 속성: 시각장애인들을 위한 대체텍스트를 작성하는 속성이에요. 이미지에 대한 설명을 적어줍니다. 또한 이미지가 로드되지 않았을 때 대체 텍스트로 사용되기도 하죠.width, height 속성: 추가적으로 길이 관련 속성을 줘서 이미지가 표출될 크..