[ DEV ] Frontend/HTML , CSS
-
CSS 셀렉터[ DEV ] Frontend/HTML , CSS 2023. 1. 10. 13:31
💡 Selector란? HTML 문서를 꾸미기 위해 어딜 꾸밀지 선택하는 것. CSS 를 연결하기 위해서는 title 아래 줄에다가 아래 코드를 입력해주면 된다. link 태그를 이용해서 css를 연결시켜주면 된다! 💡기본 CSS Selector 유형 - 전체 셀렉터 (universal selector) * HTML 문서 내의 모든 요소를 선택하는 셀렉터이다. html 요소를 포함한 모든 요소가 선택이 된다. (head 요소도 포함) 주로 box-sizing 처럼 문서 전체에 한번에 적용해야하는 스타일이 있을때 사용한다. * { box-sizing : border-box; } - 클래스 셀렉터 (Class Selector) . class 이름 class 값을 선택하는 선택자. class는 html문서에서..
-
입력 폼 만들기 (더 추가할 예정)[ DEV ] Frontend/HTML , CSS 2023. 1. 9. 21:51
이번에 만들어볼 페이지는 아래와 같다. 같은 이름을 가지게하면 팀으로 묵으면 중복안됨 우선적으로 코드를 하나로 묶어주기 위해서 태그를 사용했다. 입사 지원서 필수 정보 이름 생년월일 성별 남 여 개발자는 왜 하려고합니까? 사용해본 스택 Java Python HTML/CSS JS SQL 희망 부서 프론트엔드 백 엔드 데이터베이스 💡Input Type: text 텍스트 입력(text input)위 한 줄의 입력 필드를 정의한다. 💡Input Type: date 는 사용자가 날짜를 포함해야 하는 입력 필드에 사용됩니다 💡select, option 태그 ✅Select - 아래로 펼쳐지는 목록 상자. - 드롭다운 메뉴나 리스트 박스를 만들 수 있다. ✅Option - HTML select 태그 내부 항목 (아래 ..
-
기본 태그를 이용해서 가고 싶은 여행지 말해보기[ DEV ] Frontend/HTML , CSS 2023. 1. 9. 17:04
가고 싶은 여행지를 말하고, 함께 가자는 초대장을 만들어봤다. 짠!!! 이미지 태그와 링크 태그를 이용했더니 그럴싸 해진다. 해당 태그 사용법은 아래 링크에서 확인하면 된다. 내가 이전에 갔던 나라 소개 나는 예전에 태국을 다녀왔어. 추운걸 싫어하는 나로선 최고의 휴양지였어. 그런데 최근에 겨울의 매력에 빠져버렸지뭐야? 최근에 내가 가고 싶은 나라 소개 그래서 어딜 가고 싶냐면.... 바로 여기야! 나와 삿포로 가고 싶다면... 여기를 눌러서 투어신청을 해줘. 💡 아래는 없는 새로 사용한 태그! target="_blank" 링크 태그에 링크를 적어준 뒤, 바로 뒤에 타겟 =" 언더바 블랭크"를 적어주면, 요청할 링크 창이 열릴때 새 창으로 열리게 된다!!! target을 사용하지 않으면 해당 페이지에 창..
-
HTML 기본 태그[ DEV ] Frontend/HTML , CSS 2023. 1. 9. 16:32
💡텍스트 태그 머릿글 level 1 머릿글 level 2 단락을 넣어주는 p태그 💡링크 태그 1. p태그 안에 a태그를 만들어 링크를 걸고싶은 단어를 사이에 둔다! 2. 그리고 a태그에 href=""을 적어 넘어갈 링크를 걸어주기! (a태그 안에 넣어주기만 하면 이미지도 링크를 걸 수 있다!) 내용적기 링크 넣을 단어 내용적기 + 링크창 열릴때, 현재 보여지는 창에 덮어씌워지는게 아니라 새창으로 열리게 하는 방법은 target="_blank" 을 사용해 주면된다. 내용적기 링크 넣을 단어 내용적기 궁금한게 있다면 구글링을 눌러보세요! 바로 구글로 이동~ 💡미디어 태그 _ 이미지 태그 💡리스트 태그 ul태그 이용! 리스트 태그 연습! 아이템 1 아이템 2 아이템 3 💡테이블 태그 테이블을 만드는 순서...
-
[HTML] html 태그의 dir 속성[ DEV ] Frontend/HTML , CSS 2023. 1. 4. 19:56
html 출력 글씨 거꾸로... 라는 식으로 써치하다 알게된 지식! 부트스트랩에서 코드 복붙하는데 왠 아랍어 코드가 복붙되어서 글씨가 이렇게 오른쪽에서부터 출력이 되었다.. 평소 이 코드의 뜻을 알고 있었기에 lang 을 en으로 바꿨는데 뭐가 문제일까? dir의 개념을 아예 인지를 못했다는 것이 문제였다. 💡 dir 란? -> 쓰기 방향을 나타내는 열거형 특성이다 "ltr"은 왼쪽->오른쪽을 뜻하며, 한국어나 영어에 사용하고 "rtl"은 오른쪽->왼쪽을 뜻하며, 아랍어 등에 사용한다 "auto"는 사용자 에이전트가 결정한다(기본적인 알고리즘으로 문자 분석) 우리는 주로 한국어나 영어를 사용하므로 굳이 dir="ltr"로 선언해줄 필요는 없다 코드를 다시 바꿔준 뒤, 실행해보니 잘 나온다!
-
나만의 버킷리스트 만들기 (완성) _ (feat.스파르타코딩클럽)[ DEV ] Frontend/HTML , CSS 2022. 12. 26. 15:04
단계별로 적어내려가려고 했는데, 강의 보면서 코드스니펫으로 복붙하다보니 어느새 나만의 버킷리스트가 완성이 되었다.!!! 이번 강의를 계기로 코딩에 대한 흥미가 더 올라갔다. 특히 개발자로서의 버킷리스트를 작성해보니, 열정이 더 생겼다고 해야하나? 올 한해는 고분분투의 시간도 있었고, 방황도 했지만, 앞으로 다가올 2023년에는 더 열심히 노력해서 능력있는 개발자가 되어 있기를 바란다. 아래는 내 버킷리스트 주소이고, 원하는 목표에 달성할때마다 도장을 찍어 업데이트를 할 예정이다. 간단한 과정이라고 설명하시지만, 이런 강의를 제공해주신 스파르타코딩클럽에게 감사함을 표현하고 싶다. https://leees00n.github.io/HTML_CSS_Study/ 2023년 버킷 리스트 개발자로 취업하기. 백준 실..
-
나만의 버킷리스트 만들어보기! (1)[ DEV ] Frontend/HTML , CSS 2022. 12. 23. 02:12
💡 html, css -> html은 웹페이지에서 뼈대를 담당한다. 기본적으로 영역과 영역으로 이루어져 있다. 태그를 이용해 이름 바꿔주기! 2023년 버킷 리스트 꾸미려면 지칭을 할 수 있어야 한다. 짱구의 바지를 초록색으로 바꾸려면, "짱구의 바지"라는 지칭이 필요한 것 !! => 명찰이 필요하다!! class = " 원하는 이름 " 으로 지칭해 주면 된다~~ 2023 버킷리스트! 이렇게 지칭할 이름을 지정해주었으면, 뼈대 부분인 에서 밑에 태그를 만들어 세팅을 해줄 수 있다. 박스 구현은 를 통해서 해주기!! 아래는 이름표를 두개를 붙여줌!! bucket이라는 이름표와, img1 / img2 중에서 번갈아가면서 붙여주기! 개발자로 취업하기. 백준 골드문제 씹어먹기. 프로젝트 내 스스로 2개하기. 미..