Yeonee's Story

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 먼저 부트스트랩 홈페이지에 접속하여 부트스트랩 파일을 다운로드 해줍니다. 압축을 풀어 해당 내부 폴더들을 한 번에 드래그 하여 프로젝트 폴더 안에 넣어줍니다. 그리고 VsCode 혹은 Sublime Text를 실행시켜 파일을 저장하는 위치를 위와 같이 프로젝트 폴더 안에 index.html로 기준이 되는 html파일을 하나 생성해줍니다. head부분에 위와 같이 css파일을 적용시켜줍니다. 그리고 위와 같이 html파일 body에 작성한뒤, html파일을 열어 test 해보면 다음과 같이 내가 작성한 'Hello World!'가 화면에 출력되는 것을 확인할 수 있습니다. 두가지 에디터를 사용해보니 VsCode는 이미..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 1. neocities를 구글에 검색합니다. 2. neocities 사이트에 로그인 혹은 회원가입을 해줍니다. (정보 입력에 태그부분은 영어만 입력인식합니다) 3. 로그인시 바로 이메일 토큰 인증을 진행하게 됩니다. 이메일 토큰 메일을 받을 수 있는 실제 사용하는 이메일을 입력해주세요. 4. 왼쪽의 $ 0 표시된 무료 버전을 클릭해줍니다. 5. neocities 사이트에서 내게 부여된, 내 홈페이지 주소는 yeonluv.neocities.org 입니다. yeonluv.neocities.org에 접속해보면 neocities에서 기본적으로 부여해주는 UI와 HTML 내용이 출력되는 것을 확인할 수 있습니다. 6. htm..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 : DOCTYPE html> 글자관련태그 h1 태그입니다. 안녕하세요 반갑습니다. 안녕히가세요 h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. 존재하지않는 태그는 일반글꼴 적용 문단 영역을 나누는 태그로는 p태그와 pre태그가 있다.(h태그 포함) 단, p태그는 줄바꿈입력을 별도의 태그로 지정해야한다. 그리고 공백은 한개의 공 백만을 표시한다. 그러면 공백을 여러개 포함시키고 싶다면? 기호문구로 작성 기 호 문 구 pre태그는 여러 공백을 인식 할 수 있다. 줄 바꿈 등을 포함하여 입력한 내용을 있는 그대로 표현하는데 특화된 태그 그 밖의 글자를 다루는 태그들 일..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 제가 css 초반 공부할 때 정말 수십번도 더 챙겨본 영상이었는데요, 이제 세미 프로젝트가 들어가는 시기라 css를 활용하였던 시기에서 시간이 좀 흐르니깐 정렬부분이 다시금 조금 헷갈려서 다시 영상을 보고 공부하게되었습니다. 화면구성시에 헷갈리는 부분을 찾으며 일일이 영상을 확인해 보기에 시간이 효율적이지 않은 듯 하여 제가 공부하기 쉽게 다시 정리하는 포스팅을 작성하고자 합니다. + (해당 콘텐츠 영상 링크는 하단에 함께 노출하여두었습니다. 영상 선생님이 진짜찐짜 설명 너무 잘해주셔서 저 바로 구독자 되었었는데, 다른 분들도 이 영상보시고 css 기초 공부하시는거 강추해요!) float의 단점을 보완하여 사용하기 ..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 요소 가져오기 HTML 요소에 접근하기(해당 요소객체 가져오기) 1) ID로 가져오기(접근하기) 아이디로 접근 function accessId(){ // 아이디로 요소에 접근할때 // document.getElementById("아이디명") const area1 = document.getElementById("area1"); console.log(area1); console.dir(area1); // 접근가능한 속성들에대해 살펴볼때 //선택된 요소에 속성들에 접근해서 값을 가져온다거나 변경 가능 // 속성에 접근하고자 한다면 => 선택된 요소.접근하고자하는 속성명 area1.innerHTML = "아이디로 접근성공함!!"; // ..