strawberry fields

가변적으로 변하는 페이지나 반응형 사이트를 만들 때, width/ height 값을 주기 까다로운 경우에 사용하면 좋은 calc() 함수 calc() 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다 ! 전체 너비를 3등분 하고 싶은 경우 전체 너비에서 중간 60px만 띄우고 싶은 경우 위 경우 말고도 사칙연산을 이용하여 width, height, font-size, margin, padding 등등으 값을 조정하거나 각도, 수치, 변형등에도 사용할 수 있다 calc() 함수의 특징 🍞 사칙연산과 마찬가지로 곱하기, 나누기가 먼저 연산된다. 🍞 +와 - 연산자는 좌우에 공백이 있어야 한다. calc (50% -8px)은 백분율 값과 음수로 해석하여 유효하지 않음 🍞 *와 / 연산자는 공백을 ..

지난주 코딩테스를 풀다가 공부하게 된 split() 함수 (tmi..) .split() 은 문자열을 분할하는 메서드이다 아래 세가지 문법으로 사용할 수 있는데, separator에는 분할의 기준을 넣고(예를 들면 쉼표 등등) limit에는 최대 분할 개수를 정하여 넣는다. separator/limit은 모두 필수사항이 아님 ✔️ split() ✔️ split(separator) ✔️ split(separator, limit) 예제를 확인해 볼게요 1. 파라미터를 입력하지 않을 경우 파라미터로 아무것도 전달하지 않으면 문자열 전체를 하나의 배열에 담아서 리턴한다 이때 배열의 길이는 1이다 2. separator = " " (빈배열)로 입력할 경우 문자열을 잘라서 각각 잘라진 조각들을 배열에 저장하여 리턴한..

특정 구역이나 구획을 분할해주는 & 태그 ! 두 태그가 HTML 내에서 비슷한 역할을 한다 의미가 없는 태그이기 때문에 nav, article등이 아닐 때.. 무언가 적절한 태그를 주기 어려울 때 이 의미 없는 두가지 태그를 보통 많이 사용한다 또한 그룹화를 위해 사용하며, 스타일링 (css)을 일관적으로 적용하려는 목적이 큰 태그들이다 그렇다묜 두 태그의 차이점은 무엇일까? 는 "블럭요소" 은 "인라인요소" 아래화면을 보시면 이해가 더 쉽습니당 핑크색 부분은 div 태그를 사용한 것이라 박스 형태로 영역이 설정되어 있고 그 안에 문장들이 배열된다 하늘색 부분은 span 태그를 사용한 것이라 줄 단위로, 개별적으로 영역이 설정되어 있다 때부분 텍스트를 꾸밀 땐 span으로 묶어서 사용해 준답니다 div ..

와 태그는 모두 텍스트를 굵게 만들어 주는 요소이다 그러나 스크린리더(화면 낭독기)에서 두 태그의 차이점이 드러난다 정말 단순하게 텍스트를 굵게 표시하는 역할만을 하고 단순하게 보여지는 강조가 아닌, 실제 페이지 내의 중요한 부분을 알려주는 역할을 한다 스크린 리더 사용시 태그가 들어간 부분은 강한 억양을 사용하여 읽어 준다 이는 웹 접근성에 큰 기여를 하기 때문에 두 태그를 꼭 선별하여 사용해 주어야 한다 & 태그도 글씨를 기울임체로 표현해 주는 동일한 역할을 하지만, 위와 같이 웹 접근성에 대한 기여가 전혀 다르기 때문에 주의해서 사용해 주어야 한다 !

Block - 블록요소는 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다 (부모 요소의 전체 공간을 차지 한다) - 상자를 아래로 쌓는다고 생각하면 간단 ! - div, h1, p 태그가 있음 Inline - 인라인 요소는 바로 이전 요소가 끝나는 지점부터 시작하며, 요소의 내용(content)만큼만 크기를 갖는다 - 인라인 요소는 블록 요소를 포함할 수 없다 - span, img, a, strong 태그가 있음 아래 그림을 보면 이해하기가 쉽고, VS code에서 직접 코드를 쳐보면 바로 이해가 되어요 블록요소를 갖는 태그 (대표적으로 div), 인라인요소를 갖는 태그 (대표적으로 span)를 각각 작성해 주고 background-color를 지정해 주면 한 눈에 비교가 된다 박스1은 bloc..

🌷Web에 Table로 표 만들기 HTML에서 표를 만들어주는 태그에 대해 공부해 볼게요 오늘 😎 테이블을 구성할 때는 거의 아래 네개의 태그를 사용해 줍니다 : 테이블 자체를 만드는 태그 : 테이블의 헤더부분을 만드는 태그 : table row 라고 하며, 태이블의 행을 만드는 태그 : table data 라고 하며, 테이블의 열을 만드는 태그 VS code에 요런 코드를 쳐주면 아래와 같은 표가 완성 됩니다 헤더부분에 넣어준 일정, 준비물의 경우 스스로 bold체로 표시되는게 다른점인듯 HTML에서 꾸며줄 때는 이런식의 코드를 작성해 주면 되는데, 살짝 촌스러운 감이 있어서 저는 포스팅을 위해 CSS로 스타일을 조금 가미해 주었습니다 테이블 디자인을 변경할 때는 아래 속성들을 사용하면 되고, tabl..

🌷 멋사 탈락 기념으로(?) 인터넷 무료강의 수강권을 주셔서 HTML/CSS 수업을 들었다 강의 내용은 HTML/CSS 로 이력서 만들기 !! 기본적인 HTML 내용들을 설명해 주면서 CSS를 곁들여 꾸밀수 있도록 유도해 주시는 강의인뎅 , 마침 딱 디자인적으로 딱 내가 좋아하는 스타일이어서 추후에 여기에 이것저것 갖다 붙여서 실제 이력서로 사용해 보려 함당 헤헤 완성 된 이력서를 첨부해 볼게요 디테일한 부분들은 예시랑 동일하게 우선 작성했고, 강의에서는 오른쪽 하단에 인스타그램/페이스북/트위터 등등의 이미지를 넣었지만 나는 구글 폰트에서 아이콘을 다운 받아 넣었다 왜냐? 그냥.. 귀여워성.. ^__^ 아이콘이랑 네이버/티스토리 블로그가 연동되도록 링크도 넣었답니다. 제법 재밌고 즐거웠던 이력서 만들기 😎

오늘은 css에서 class, id 속성에 스타일을 지정하는 방법을 공부해 보겠읍니다 🫡 ( class/ id를 각각 언제 써야 하는지는 저도 다시 공부를 해보려해요..자아성찰) 간단하게 보자면 id는 : 전체 문서에서 딱 그 태그만 표현하고 싶을 때 사용하는 것이고, class는 : 여러가지 태그를 한번에 바꾸어 주고 싶을 때 사용하는 것 !! 이제 본격 스타일을 지정해줘 볼까요 우선 태그의 속성 부분에 id/class 를 써 주고, 이름은 임의로 'yellow' / 'blue'로 지정 !! 추후에는 더 디테일하고, 의미있는 네이밍을 해야겠찌요 이제 각각에 스타일을 지정해 줄건데, id 값에는 #(샾)을 써줘야고, class에는 .(피리어드)를 써줘야 합니다. 이것은 필수에오 id 속성에는 폰트 컬러와..

🌷 addEventListener() 함수 화면에 마우스를 올리거나, 키보드를 조작하거나 터치하거나 등등등.. 어떤 행위를 하면(?) 그에 대한 반응을 하는 것을 이벤트라 한다 자바스크립트에서 이벤트 처리하는 방법은 3가지가 있는데, 1️⃣ HTML 태그 안에서 이벤트 처리 연결하기 2️⃣ DOM 요소에 이벤트 처리 연결하기 3️⃣ addEventListener() 함수 사용하기 (오늘 제가 공부한 것은 이것입니다..네네..) 1, 2번은 이벤트를 하나만 지정할 수 있다는 단점이 있지만, addEventListener() 함수를 사용하면 여러개의 이벤트를 등록할 수 있다. 기본 문법은 아래와 같다 pic 이라는 변수가 있고, 이 변수에 지정된 요소에 이벤트를 처리하고 싶다면 'pic.addEventLis..

🌷 DOM(Document Object Model) 문서객체모델에 대하여 DOM에 대해 강조하는 분들이 꽤 있어서 열심히 공부해보려 했지만 처음 접했을 땐 이게 몰까.. 문서 객체 모델..? 단어 하나부터 어려워요.. 공부의 세계란 끝이 없다(?) 그래서 살짝 제껴 놓고 다른 강의 들을 듣다가 오늘 다시 공부를 했는데 제법 이해가 되어서 정리해 보려한다 😎 ✔️ DOM의 구조는 나무처럼 생김 ㅡ DOM 트리라고도 한다 Live DOM Viewer 아래 사이트에 들어가서 이것저것 실습해보면 쬐끔 감이 잡힘.. https://software.hixie.ch/utilities/js/live-dom-viewer/ Live DOM Viewer Live DOM Viewer ... Script not loaded. ..